用CSS做滑動效果的圖片畫廊

來源:互聯網
上載者:User
css

  代碼如下:

<style>
#galleryh {
  padding:0;
  margin:0 auto 5em auto;
  list-style-type:none;
  overflow:hidden;
  width:495px;
  height:240px;
  border:1px solid #888;
  background:#fff url(http://www.alixixi.com/UploadPic/2007-7/200777205617520.gif);
  }
#galleryh li {
  float:left;
  }
#galleryh li a {
  display:block;
  height:240px;
  width:28px;
  float:left;
  text-decoration:none;
  border-right:1px solid #fff;
  cursor:default;
  }
#galleryh li a img {
  width:28px;
  height:240px;
  border:0;
  }
#galleryh li a:hover {
  background:#eee;
  width:320px;
  }
#galleryh li a:hover img {
  width:320px;
  }
</style>
<ul id="galleryh">
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205617821.jpg" alt="#1" title="#1" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205617515.jpg" alt="#2" title="#2" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205617783.jpg" alt="#3" title="#3" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205618477.jpg" alt="#4" title="#4" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205618412.jpg" alt="#5" title="#5" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205618656.jpg" alt="#6" title="#6" /></a></li>
<li><a href="#nogo">
<img src="http://www.alixixi.com/UploadPic/2007-7/200777205618845.jpg" alt="#7" title="#7" /></a></li>
</ul>

<style>#galleryh { padding:0; margin:0 auto 5em auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(http://www.alixixi.com/UploadPic/2007-7/200777205617520.gif); }#galleryh li { float:left; }#galleryh li a { display:block; height:240px; width:28px; float:left; text-decoration:none; border-right:1px solid #fff; cursor:default; }#galleryh li a img { width:28px; height:240px; border:0; }#galleryh li a:hover { background:#eee; width:320px; }#galleryh li a:hover img { width:320px; }</style><ul id="galleryh"><li><a href="#nogo"><img src="200777205617821.jpg" alt="#1" title="#1" /></a></li><li><a href="#nogo"><img src="200777205617515.jpg" alt="#2" title="#2" /></a></li><li><a href="#nogo"><img src="200777205617783.jpg" alt="#3" title="#3" /></a></li><li><a href="#nogo"><img src="200777205618477.jpg" alt="#4" title="#4" /></a></li><li><a href="#nogo"><img src="200777205618412.jpg" alt="#5" title="#5" /></a></li><li><a href="#nogo"><img src="200777205618656.jpg" alt="#6" title="#6" /></a></li><li><a href="#nogo"><img src="200777205618845.jpg" alt="#7" title="#7" /></a></li></ul>

    [Ctrl+A 全部選擇 提示:你可先修改部分代碼,再按運行]



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。