十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章运用简单易懂的例子给大家介绍Js图片点击切换轮播的实现代码有哪些,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联公司专业为企业提供峨山县网站建设、峨山县做网站、峨山县网站设计、峨山县网站制作等企业网站建设、网页设计与制作、峨山县企业网站模板建站服务,十年峨山县做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
图片点击切换
实现效果
轮播
tools.js
//动画函数 /*参数 * -1.obj 对象 * -2.speed 速度 * -3.target 执行动画的目标 * -4.arrt 要变化的样式 * -5.callback:回调函数 将会在动画执行完后执行 */ function move(obj,speed,target,arrt,callback){ //关闭上一次定时器 clearTimeout(obj.timer); //判断速度的正负值 //如果从0向800移动则为正 //如果从800向0移动则为负 var current=parseInt(getStyle(obj,arrt)); if(current>target){ speed=-speed; } //开启一个定时器 //为obj添加一个timer属性,用来保存它1自己的定时器的标识 obj.timer=setInterval(function(){ //获取原来的left值 var oldvalue=parseInt(getStyle(obj,arrt)); //在旧值的基础上增加 var newvalue=oldvalue+speed; if(speed<0&&newvalue0&&newvalue>target) { newvalue=target; } obj.style[arrt]=newvalue+"px"; //当元素到达target关闭定时器 if(newvalue===target||newvalue===target){ clearTimeout(obj.timer); //动画执行完 执行函数 callback&&callback(); } },30); };
实现效果
关于Js图片点击切换轮播的实现代码有哪些就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。