jQuery 轮播图版本四：（jquery.SuperSlide.2.1.1.js）做轮播图，多张图向左翻页

效果如下

 

 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>