jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换
1、可左右切换
2、可点击缩略图显示大图
3、缩略图多张滚动效果
直接贴代码
<div class="mod18">
<span id="prev" class="btn prev"></span>
<span id="next" class="btn next"></span>
<span id="prevTop" class="btn prev"></span>
<span id="nextTop" class="btn next"></span>
<div id="picBox" class="picBox">
<ul class="cf">
<li> <a href="javascript:void(0)"><img src="images/83293306.jpg" alt=""></a> <span>高跟鞋与美女的时尚潮流</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293260.jpg" alt=""></a> <span>紫色复古风席卷欧美,你赶上潮流了吗</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293278.jpg" alt=""></a> <span>黑色与红色的诱惑,你更爱哪一种</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293291.jpg" alt=""></a> <span>是睡衣,是贴心,是性感</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293300.jpg" alt=""></a> <span>碎花连衣裙穿出你的风格</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293339.jpg" alt=""></a> <span>性感内衣,让你美丽俏佳人</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293353.jpg" alt=""></a> <span>男人的衣柜,穿出你的style,可以不帅,可以不酷,但必须有品味</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293410.jpg" alt=""></a> <span>夏日的海滩,阳光的诱惑</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293412.jpg" alt=""></a> <span>每个人都有自己的毛绒玩具,是怀念,是寄托</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293418.jpg" alt=""></a> <span>沙滩,型男,凉爽酷劲十足</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293442.jpg" alt=""></a> <span>当中国风十足的长裙遇上性感内衣</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293447.jpg" alt=""></a> <span>两只小兔白又白,爱吃萝卜和青菜</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293458.jpg" alt=""></a> <span>鲜花配美人,亦点缀那庭院一隅</span> </li>
<li> <a href="javascript:void(0)"><img src="images/83293493.jpg" alt=""></a> <span>莫森眼镜,挡不住的潮流</span> </li>
</ul>
</div>
<div id="listBox" class="listBox">
<ul class="cf">
<li class="on"><i class="arr2"></i><img src="images/83293792.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293780.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293781.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293782.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293783.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293793.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293794.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293795.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293809.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293810.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293811.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293812.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293831.jpg" alt=""></li>
<li><i class="arr2"></i><img src="images/83293832.jpg" alt=""></li>
</ul>
</div>
<div class="clear"></div>
</div>
css:
@charset "utf-8";
body, ul, dl, dd, dt, ol, li, p, h1, h2, h3, h4, h5, h6, textarea, form, select, fieldset, table, td, div, input{margin:0;padding:0;-webkit-text-size-adjust:none}
h1, h2, h3, h4, h5, h6{font-size:12px;font-weight:normal}
div{text-align:left}
a img{border:0}
body{color:#333; text-align:center; font:12px "宋体";}
ul, ol, li{list-style-type:none;vertical-align:0}
a{outline-style:none;color:#535353;text-decoration:none}
a:hover{color:#D40000; text-decoration:none}
/* 效果CSS开始 */
.mod18{width:677px;position:relative;margin:0 auto;}
.mod18 .btn{position:absolute;cursor:pointer;z-index:99;font-size:50px;font-weight:bold;}
.mod18 .prev{left:10px;background:url(../images/prevBtn.png) no-repeat;}
.mod18 #prevTop,.mod18 #nextTop{top:250px;width:32px;height:48px;}
.mod18 #prev,.mod18 #next{top:490px;width:10px;height:16px;}
.mod18 #prevTop{background:url(../images/prevBtnTop.png) 0 0 no-repeat;}
.mod18 #nextTop{background:url(../images/nextBtnTop.png) 0 0 no-repeat;}
.mod18 .next{right:10px;background:url(../images/nextBtn.png) no-repeat;}
.mod18 li{float:left;}
.mod18 .cf li{position:relative;color:#fff;}
.mod18 .cf a{display:block;width:526px;height:377px;position:absolute;color:#fff;}
.mod18 .cf li span{display:block;width:486px;position:absolute;left:75px;bottom:0;padding:10px 20px;line-height:22px;text-align:left;background:rgba(0,0,0,0.6);filter:progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = "#60000000",endColorstr = "#60000000");}
.mod18 .picBox{width:526px; height:394px; padding-left:75px; padding-right:76px;position:relative;overflow:hidden; padding-top:40px;}
.mod18 .picBox ul{height:377px;position:absolute; left:0;}
.mod18 .picBox li{padding-left:75px; padding-right:1px; width:526px;height:377px;}
.mod18 .listBox{width:642px;height:100px;margin:0 auto;position:relative; padding-top:15px;overflow:hidden;}
.mod18 .listBox ul{height:88px;position:absolute; padding-left:12px;}
.mod18 .listBox li{width:127px;height:77px;cursor:pointer;position:relative; padding:5px 0 0 0;}
.mod18 .listBox li i{display:none;}
.mod18 .listBox li a{display:block;width:108px;height:77px;}
.mod18 .listBox img{border:3px solid #fff;}
.mod18 .listBox .on img{border:3px solid #CECDCC;}
.mod18 .listBox .on{background:url(../images/img_bg.jpg) center top no-repeat;}
.mod18 .listBox .on i{display:block;}
要引入两个js 请下载
分享到:
相关推荐
jQuery图片切换插件图像幻灯片滑动切换 jQuery图片切换插件图像幻灯片滑动切换
jquery仿flash的图片幻灯片播放特效实例完整版 jquery仿LightBox图片盒子单击逐渐放大的图片展示的插件下载 jquery仿Lightbox的插件jQuery UI.ariaLightbox点击图片放大显示插件下载 jQuery仿动感flash自动滚动图片...
jquery图像幻灯片上下滑动图片切换
jQuery图片垂直切换幻灯片代码是一款使用bootstrap的布局实现的幻灯片切换代码。
jquery仿163网易图片新闻幻灯片切换鼠标点击缩略图片文字内容和图片切换
jquery仿淘宝商城商品详情页图片展示特效, jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 jquery仿淘宝商城商品详情页图片展示特效 ...
jquery图片广告仿QQ幻灯片倒计时广告代码 jquery图片广告仿QQ幻灯片倒计时广告代码 jquery图片广告仿QQ幻灯片倒计时广告代码
该特效一款jQuery仿途牛官方网站的全屏幻灯片焦点图代码特效,带左右箭头跟索引图标切换,是一款非常简单方便实用的网站大图轮播js图片插件。
jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换 jquery图片弹性幻灯片切换带缩略图控制全屏幻灯片切换
js图片幻灯片 jquery幻灯片图片 html幻灯片案例,官方以及本人的案例各有一个
Jquery淡入淡出幻灯片特效图片切换源码下载
jquery图片相册幻灯片带对话框提示鼠标点击一张张相册图片放大效果
jQuery途牛首页定时幻灯片轮播效果
jquery图片切换幻灯片缩略图片轮播切换
jQuery倾斜逐张切换幻灯片 ,图片切换
jQuery+swiper.js幻灯片图片视差滚动轮播特效,非常棒的一款带标签的jQuery图片视差切换代码。
jquery网格图片相册幻灯片点击导航标签显示图片相册 jquery网格图片相册幻灯片点击导航标签显示图片相册 jquery网格图片相册幻灯片点击导航标签显示图片相册
jquery幻灯片图片轮播带进度条幻灯片图片切换
jQuery带视差切换效果幻灯片代码是一款在每一个slide中都可以带一个子幻灯片,两重幻灯片在运行的过程中会产生不错的视觉差效果。