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

641095056qq

641095056qq

2016-02-19 20:27

下面是个用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(/imagelist/06/24/o9642o826u4n.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"
lia href="#nogo"
img src="/imagelist/06/24/433movw9ni5t.jpg" alt="#1" title="#1" //a/li
lia href="#nogo"
img src="/imagelist/06/24/5j2s3486qur7.jpg" alt="#2" title="#2" //a/li
lia href="#nogo"
img src="/imagelist/06/24/6g5c95l21jr0.jpg" alt="#3" title="#3" //a/li
lia href="#nogo"
img src="/imagelist/06/24/vt3bd2g7qyqk.jpg" alt="#4" title="#4" //a/li
lia href="#nogo"
img src="/imagelist/06/24/90850kbw77is.jpg" alt="#5" title="#5" //a/li
lia href="#nogo"
img src="/imagelist/06/24/7a3sv6r1j4ak.jpg" alt="#6" title="#6" //a/li
lia href="#nogo"
img src="/imagelist/06/24/7ej8grn86b3u.jpg" alt="#7" title="#7" //a/li
/ul

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

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

Web开发
用CSS做滑动效果的图片画廊

用CSS实现给图片上色的效果

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
用CSS实现给图片上色的效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

用CSS3做的各种网页效果

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
用CSS3做的各种网页效果

用FLASH遮罩效果做图片切换效果

电脑网络
用FLASH遮罩效果做图片切换效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

ul结合CSS制作网页相册滑动浏览效果

Web开发
ul结合CSS制作网页相册滑动浏览效果

css实现的图片模糊效果

Web开发
css实现的图片模糊效果

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

Java开发工具Eclipse使用中报错的详细分析

Java开发工具Eclipse使用中报错的详细分析

为简化企业级系统开发而诞生的Spring

为简化企业级系统开发而诞生的Spring
下拉加载更多内容 ↓