这篇文章运用简单易懂的例子给大家介绍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图片点击切换轮播的实现代码有哪些就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

本文标题：Js图片点击切换轮播的实现代码有哪些
转载来源：http://ybzwz.com/article/jgdjhh.html