效果如下
1.HTML部分
<div class="four_box"> <div class="cont1200"> <div class="picScroll-left"> <div class="hd"> <a class="next"><img src="__IMG__/index/white_right.png" alt=""></a> <a class="prev"><img src="__IMG__/index/white_left.png" alt=""></a> </div> <div class="bd"> <ul class="picList"> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" /></a></div> </li> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" /></a></div> </li> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" /></a></div> </li> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img4.png" /></a></div> </li> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img5.png" /></a></div> </li> <li> <div class="pic"><a href="" target="_blank"><img src="__IMG__/index/img6.png" /></a></div> </li> </ul> </div> </div> </div> </div>
2.CSS部分
.four_box{ background:url(../../images/index/bg_3.png) no-repeat; background-size: 100% auto; } .four_box .cont1200{ padding: 150px 0 10px; height: 400px; } .picScroll-left{ width:100%;margin:0 auto;position:relative; } .picScroll-left .hd .prev{position: absolute;top:35%;left: -56px; cursor:pointer;} .picScroll-left .hd .next{position: absolute;top:35%;right: -52px;} .picScroll-left .hd .prevStop{ background-position:-60px 0; } .picScroll-left .hd .nextStop{ background-position:-60px -50px; } .picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; } .picScroll-left .hd ul li{ float:left; width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; } .picScroll-left .hd ul li.on{ background-position:0 0; } .picScroll-left .bd ul{ overflow:hidden; zoom:1;height: 360px; } .picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center; } .picScroll-left .bd ul li .pic{ text-align:center; } .picScroll-left .bd ul li .pic img{ display:block; width: 282px; height: 360px;} .picScroll-left .bd ul li .title{ line-height:24px; }
3.JS部分
<script type="text/javascript" src="__JS__/common/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="__JS__/common/jquery.SuperSlide.2.1.1.js"></script> <script> $(function () { jQuery(".picScroll-left").slide({ titCell: ".hd ul", mainCell: ".bd ul", autoPage: true, effect: "left", autoPlay: true, vis: 4, trigger: "click" }); }) </script>