jQuery图片自动轮播插件

来源:https://www.sucaihuo.com/js/1468.html 2017-03-17 21:21浏览(857) 收藏

图片自动轮播,左右切换轮播,注释清楚明了,自己原创写的一款jQuery自动轮播插件
jQuery图片自动轮播插件
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 10 积分

自动轮播,左右切换轮播

var curIndex = 0;
  $(".indexList").find(".all").text($(".imgList li").length);
  var autoChange = setInterval(function(){
    if(curIndex < $(".imgList li").length-1){
      curIndex ++;
    }else{
      curIndex = 0;
    }
    changeTo(curIndex);
  },2500);
 
   /**添加绑定事件**/
   var length=$(".imgList li").length;
   function left_lunbo(){
       //each  循环 获取当前带imgOn的元素 
       var current=0;
       $(".imgList li").each(function(){
            if($(this).is('.imgOn')){
                current=$(this).index();
            }
        });
        //到开头的时候需要从后边重新开始
        if(current==0){
            current=length;
        }
        changeTo(current-1);
   }
   function right_lunbo(){
       //指向下一个元素
       var current=0;
       $(".imgList li").each(function(){
            if($(this).is('.imgOn')){
                current=$(this).index();
            }
        });
        //判断是否是最后   each 索引 从0开始
        if(current== length-1){
            changeTo(0);
        }else{
            changeTo(current+1);
        }  
   }
   /** 先清除之前imgOn infoOn 类
   *  给指定的索引 添加 类
   */
   function changeTo(number){
        $(".imgList li").removeClass('imgOn');
        $('.imgList li').eq(number).addClass('imgOn');
        $(".infoList li").removeClass('infoOn');
        $(".infoList li").eq(number).addClass("infoOn");
        $(".indexList .red").text(number+1);
   }
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2