实现轮播模拟点击事件

需求描述:

实现轮播,在轮播的时候模拟点击事件,当鼠标滑入的时候,轮播停止,滑出轮播继续。这个轮播的缺点就是不能控制轮播的顺序

代码:

样式部分

.flag{
color:#fff;
}

脚本部分

$(document).ready(function(){
   // 轮播图
    var slideShow=$("#pageContent"); //获取最外层框架的名称
    showNumber=slideShow.find("#BA_432116553337908 .BAbuttonElement");//获取按钮
    window.clearInterval(timer);//定时器返回值,主要用于关闭定时器
    var iNow=0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
    showNumber.eq(iNow).addClass("flag").siblings().removeClass("flag")
    var interval = 7000;//轮播时间间隔 
    showNumber.on("click",function(){  //为每个按钮绑定一个点击事件 
         $(this).addClass("flag").siblings().removeClass("flag"); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
    });
    //打开定时器
   var timer = setInterval(function(){ 
             iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
            //  console.log("当前的索引是"+iNow)
             if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
                // console.log("长度是:"+showNumber.length)
                iNow=0;
             }
             showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
        },interval); //4000为轮播的时间
   // 鼠标滑入效果
   $("#BA_432116553337908 .BAbuttonElement").mouseenter(function() {
       var index=$(this).index(); 
    //    console.log("鼠标滑上的索引是:"+index)
       iNow=index;
       showNumber.eq(iNow).trigger("click")
       window.clearInterval(timer);
   }			
   );
//    $("#BA_686523701953414").mouseenter(function(){
//          window.clearInterval(timer);
//    }
//    );
   // 鼠标滑出效果
   $("#BA_432116553337908 .BAbuttonElement").mouseleave(function(){
       timer = setInterval(function(){ 
             iNow++;    //让图片的索引值次序加1,这样就可以实现顺序轮播图片
             if(iNow>showNumber.length-1){ //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
                 iNow=0;
             }
             showNumber.eq(iNow).trigger("click"); //模拟触发数字按钮的click
        },interval); 
   });
})

版权声明:本文为bulabulahei原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。