使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题） |
您所在的位置：网站首页 › js图片循环播放 › 使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题） |
使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）
|
使用js制作完整轮播图 （解决最后一张切换到前面一张的动画问题）
首先先做好界面部分 使所有的图片浮动到一行中， 然后overflow：hidden; 清除溢出 需要动的部分需要添加定位 用户看到的轮播效果就是 改变图片的偏移量，使其滚动，添加定时器使其自动播放 这是界面部分 需要注意的问题是在浮动的时候父元素的宽度一定要足够 应该等于下面的图片的宽度加上他的边距的和 这里我采用的是 使用js动态计算宽度 包括图片下方的小圆点也采用的js实现 至于图片为什么是6张 这个是为了解决第五张到第一张的切换问题，下面会详细讲到 js部分 可以实现的功能 1、自动播放 2、当鼠标放在图片上时停止播放 离开继续播放 3、使用下面的小圆点 点击切换 并且 不合自动播放冲突 window.onload = function(){ var imagesL = document.getElementById("imagesL"); var imagesAL = document.getElementsByTagName("img"); imagesL.style.width = 610*imagesAL.length + "px";//动态计算父盒子的宽度 var banner = document.getElementById("banner"); var nav = document.getElementById("nav"); nav.style.left = (banner.offsetWidth - nav.offsetWidth)/2 + "px"; //计算小圆点的位置 使小圆点居中 var allA = document.getElementsByTagName("a"); var index = 0; allA[index].style.backgroundColor = "black"; var timer; for(var i = 0; i clearInterval(timer); index = this.num; // alert(this.num); // imagesL.style.left = -610*index + "px"; setA(); 当鼠标放到小圆点上时改变颜色 切换后改变小圆点的颜色 move(imagesL, "left", 30, -610*index, function(){ //点击后继续自动播放 autoChange(); }); } } imagesL.onmouseover = function(){ clearInterval(timer); } //鼠标停在图片上时 轮播动画停止 imagesL.onmouseout = function(){ autoChange(); } // 鼠标离开图片时轮播动画继续播 autoChange(); //开启自动播放 function setA(){ //关于小圆点颜色变化的函数 if(index >= imagesAL.length - 1){ index = 0; imagesL.style.left = 0; // 使第六张 瞬间变为第一张，直接修改lef为0 } for(var i=0 ;i //自动播放函数 timer = setInterval(function(){ index ++; move(imagesL, "left", 3, -610*index, function(){ setA(); //在刚播完第六张 瞬间切换到第一张 第六张与第一张是同一张图片 }); },3500); } } function move(obj,attr,speed,target,callback){ //封装的函数为tools 功能为实现 元素的动态移动 var current = parseInt( getStyle(obj,attr)); //转化为数字计算 if(current > target) speed = -speed; clearInterval(obj.timer); //清除计时器的累加 obj.timer = setInterval(function(){ //把timer添加到obj中使动画执行不冲突 var oldvalue = parseInt( getStyle(obj,attr)); var newvalue = oldvalue + speed ; if(speed target){ //速度小于0 并且newvalue < target向左移 newvalue = target; } obj.style[attr] = newvalue + "px"; if(newvalue == target){ clearInterval(obj.timer); callback && callback(); //回调函数 判断是否有这个有则执行 没有的话不影响该函数的执行 } },3); } function getStyle(obj,name){ // 获取元素样式的函数 if(window.getComputedStyle){ //判断浏览器 return getComputedStyle(obj,null)[name]; } else{ return box.currentStyle[name]; } }最后一张切换到第一张 这里应用了一个技巧 如果有5张图片 添加第六张图片 让第六张图片与第一张图片相同（由于我上面求父盒子宽度使用的js动态添加的所以不需要再考虑父盒子宽度不足的问题） 当播到第六张（与第一张相同）使第六张 瞬间变为第一张，直接修改left为0，这就实现了第六张与第一张 和谐切换 这次的轮播图 用到了封装好的 tools工具 和一个getStyle(）函数 这个可以参考我写的 getStyle()点击进入 如果想使用此轮播图 里面的图片及大小需要自己更改 |
【本文地址】