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 请下载