轮播实例

 

本实例为平时练习所用，故也许不是符合每个实战项目，所以仅提供轮播实例思路以便启发灵感。

1、以下为html部分

<div id="slider-box">
　　<!-- 滑动广告，图片换为自己地址即可-->
　　<div id="slider">
   　　<img class="active" src="Images/index/banner_02.jpg">
   　　<img src="Images/index/banner_01.jpg">
   　　<img src="Images/index/banner_03.jpg">
   　　<img src="Images/index/banner_04.jpg">
   　　<img src="Images/index/banner_05.jpg">
   　　<ul>
      　　<li class="active">1</li>
      　　<li>2</li>
      　　<li>3</li>
      　　<li>4</li>
      　　<li>5</li>
  　　 </ul>
　　 </div>       
</div>

2、以下为JS部分

jQuery.fn.carousel=function(){
    var interval=3000; //每隔3秒轮换一张
    var duration=500; //每次轮换动画的持续时间
    var $imgList=this.children('img'); //所有的img组成的类数组对象
    var $liList=this.find('li'); //所有的li组成的类数组对象
    var cur=0; //当前显示的广告的序号
    var next=1; //下一张显示的广告的序号

    //开启一个定时器，每隔interval时长启动一次轮换
    setInterval(function() {
        lunHuan()

    },interval)
    //为每个li添加事件监听，单击后直接显示指定的广告
    $liList.click(function(){
        var i=$liList.index(this); //点击的li在所有li中的序号
        next=i;
        lunHuan(); //点击后立即开始广告轮换
    });

    //进行广告轮换
    function lunHuan(){
        //让第next个li圆点添加.active，其兄弟删除.active
        $liList.eq(next).addClass('active').siblings('.active').removeClass('active');
        //让当前显示的广告启动动画向左滑动，滑出去后，删除active
        $imgList.eq(cur).animate({
            left:'-100%'
        },duration,function(){
            $(this).removeClass('active');
        });
        //让即将要显示的下一张广告添加.active，出现在最右侧，开始动画向左滑动
        $imgList.eq(next).addClass('active').css('left','100%').animate({
            left:'0'
        },duration);
        //修改cur和next变量的值
        cur=next;
        next++;
        if(next>=$imgList.length){
            next=0;
        }
    }
}