用slide实现图片轮播效果

----------
需要引用的JS

<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>

----------
banner层的样式

<style>
#banner_box{ background:#fff; width:100%; height:500px;padding-top:120px; position:relative; overflow:hidden;}
.banner{ width:100%; margin:0 auto; text-align:center; height:auto; position:absolute; left:-1000px; top:120px;}
.banner ul{ width:4000px; text-align:center;}
.banner ul li{ float:left;}
.band_gg{height:500px;position:absolute;top:120px;cursor:pointer;}
.ban_left{left:0;background:rgba(255,255,255,0.5) url(../images/prev.png) no-repeat 96% center; display:block; width:55px;}
.ban_right{right:0;background:rgba(255,255,255,0.5) url(../images/next.png) no-repeat 4% center; display:block; width:55px;}
</style>

----------
HTML 代码

<div id="banner_box">
<div class="banner">
<ul>
<li><img src="banner/banner1.png" alt="" width="100%"></li>
<li><img src="banner/banner2.png" alt="" width="100%"></li>
<li><img src="banner/banner3.png" alt="" width="100%"></li>
<li><img src="banner/banner4.png" alt="" width="100%"></li>
</ul>
</div>
<div class="ban_left band_gg"></div>
<div class="ban_right band_gg"></div>
</div>

----------
实现banner轮播效果
    $(".banner ul").animate({'left':'-50px'},300,function(){
        $("#banner_box").slide({
        mainCell:".banner ul", //切换元素的包裹层对象
        titCell:".banner ul li", //导航元素对象（鼠标的触发元素对象）
        prevCell:".ban_left", //前一个/页按钮对象
        nextCell:".ban_right",//后一个/页按钮对象
        effect:"leftLoop",//动画效果 fade：渐显； || top：上滚动；|| left：左滚动；|| topLoop：上循环滚动；|| leftLoop：左循环滚动；|| topMarquee：上无缝循环滚动；|| leftMarquee：左无缝循环滚动；
        trigger:"click",//titCell触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；
        autoPlay:true, //自动运行
        easing:"easeInOutQuint", //缓动效果 [v2.1]更改默认效果为“swing”，使效果更流畅
        delayTime:1000, //毫秒；切换效果持续时间（一次切换效果执行所用的时间长度）
        interTime:2000, //毫秒；自动运行间隔。当effect为无缝滚动(topMarquee/leftMarquee)时，相当于运行速度。
        defaultPlay:true,//默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单
        vis:3,//visible缩写，mainCell的可视范围个数，当实际内容个数少于可视个数的时候，不执行SuperSlide效果。
               });
             });

          //让banner背景左右透明
          var wid=$(".banner li:first").width();
          var wind=$(window).width();
          if ((wind-wid)>0){
             $(".banner").css("padding-left",(wind-wid)/2+"px");
             $(".band_gg").width((wind-wid)/2);
          }else{
             $(".band_gg").width(0);
          }
         $(window).resize(function(){
             var wind=$(this).width();
             if ((wind-wid)>0){
                 $(".banner").css("padding-left",(wind-wid)/2+"px");
                 $(".band_gg").width((wind-wid)/2);
             }else{
               $(".band_gg").width(0);
           }       
        });
————————————————
版权声明：本文为CSDN博主「窗台上的疯子」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/panghaichun/article/details/50504133