需求描述:
实现轮播,在轮播的时候模拟点击事件,当鼠标滑入的时候,轮播停止,滑出轮播继续。这个轮播的缺点就是不能控制轮播的顺序
代码:
样式部分
.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版权协议,转载请附上原文出处链接和本声明。