实现轮播模拟点击事件

需求描述：

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

代码：

样式部分

.flag{color:#fff;
}

脚本部分

$(document).ready(function(){// 轮播图var slideShow=$("#pageContent"); //获取最外层框架的名称showNumber=slideShow.find("#BA_432116553337908 .BAbuttonElement");//获取按钮window.clearInterval(timer);//定时器返回值，主要用于关闭定时器var iNow=0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0showNumber.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); });
})

实现轮播模拟点击事件相关推荐

用vue-awesome-swiper实现轮播图, 点击事件不生效
在项目里使用swiper实现轮播图效果把点击事件挂到图片或者swiper上在切页之后, 或者轮播到次轮之后, 有的图片无法点击原因是开启了(loop:true) 开启loop, 在DOM结构上,s ...
轮播图、阅读注册协议、网页时钟、随机点名、小米搜索框、轮播图点击切换——web APIs练习
目录一.获取元素(DOM) 1. 随机轮播图案例 2. 阅读注册协议(定时器间歇函数的应用) 3. 轮播图定时器版 4. 网页时钟二.事件基础(DOM) 1. 随机点名案例 2. 轮播图点击切换( ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
JS实现轮播图点击切换、按钮切换功能
JS实现轮播图点击切换.按钮切换功能前言轮播图案例总结前言轮播图的案例非常经典,写法也非常多,我在写一个自己用的比较多的写法,帮助大家理解,在网页的设计中,可以直接拿去用(记得换图片路径哦! ...
自定义控件：图片轮播，点击图片进入webview
自定义控件:图片轮播,点击图片进入webview 版权声明:本文为博主原创文章,未经博主允许不得转载. 很方便的先自定义控件,可以直接使用,添加属性和实现功能: import java.util.Ar ...
天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件
前面几篇文章主要是讲了加载天地图.在天地点上循环加载标注点并给标注点添加事件.根据标注点坐标确定地图的显示范围.在天地图显示坐标轨迹以及在天地图上画多边形,电子范围. 本文再讲一点复杂操作. 1.在 ...
jquery click()方法模拟点击事件对a标签不生效的解决办法
jquery click()方法模拟点击事件对a标签不生效的解决办法参考文章: (1)jquery click()方法模拟点击事件对a标签不生效的解决办法 (2)https://www.cnblog ...
webview 模拟点击_Android如何基于坐标对View进行模拟点击事件详解
前言大家应该都知道,在Android中,我们对于View进行模拟点击事件,很容易,比如调用View.performClick即可. 但是有些时候,我们想要更加精细的点击,比如View的某一区域或者某 ...
React 模拟点击事件
对于点击事件 imgRef.current.dispatchEvent(new MouseEvent('click', { bubbles: true })); React模拟点击事件是用的原生模拟, ...

实现轮播模拟点击事件

需求描述：

代码：

样式部分

脚本部分

实现轮播模拟点击事件相关推荐

最新文章

热门文章