• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

用CSS做滑动效果的图片画廊_css

css 搞代码 7年前 (2018-06-10) 129次浏览 已收录 0个评论

  代码如下:

<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(/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=”/UploadPic/2007-7/200777205617821.jpg” alt=”#1″ title=”#1″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205617515.jpg” alt=”#2″ title=”#2″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205617783.jpg” alt=”#3″ title=”#3″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205618477.jpg” alt=”#4″ title=”#4″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205618412.jpg” alt=”#5″ title=”#5″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205618656.jpg” alt=”#6″ title=”#6″ /></a></li>
<li><a href=”#nogo”>
<img src=”/UploadPic/2007-7/200777205618845.jpg” alt=”#7″ title=”#7″ /></a></li>
</ul>

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址