<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 601px; height: 314px; margin: 150px 30%; padding: 5px; border: 1px solid blue; } .inner { width: 601px; height: 314px; overflow: hidden; position: relative; } .inner ul { list-style: none; width: 1000%; /*使得ul更宽，后面li能浮动到一行上*/ position: absolute; top: 0; left: 0; } img { vertical-align: top; } li { float: left; } </style> </head> <body> <!-- 使li在一行上，ul是li父元素，ul多余的部分被隐藏 实现左右轮播效果，需移动ul，即向左移动一个图片的长度， --> <!-- 左右无缝自动轮播效果，原是6张图片，我们最后加1张第一张图片，一共7张图片 当到最后一张图片时，由于第七张图片和第一张相同，所以我们直接跳到第一张 --> <div class="box" id="box"> <div class="inner" id="inner"> <!--相框--> <ul> <!-- 每张图片都可被点击跳转到网页，所以有a标签 --> <li id="li1"><a href="#"><img src="images/1.png" alt=""></a></li> <li><a href="#"><img src="images/2.png" alt=""></a></li> <li><a href="#"><img src="images/3.png" alt=""></a></li> <li><a href="#"><img src="images/4.png" alt=""></a></li> <li><a href="#"><img src="images/5.png" alt=""></a></li> <li><a href="#"><img src="images/6.png" alt=""></a></li> <li><a href="#"><img src="images/1.png" alt=""></a></li> </ul> </div> </div> <script>
function my$(id) {
return document.getElementById(id);
}
//获取最外面的div var box = my$("box"); //获取相框inner var inner = box.children[0]; //获取inner相框的宽度,和照片宽度相等，因为inner的宽度就是内容的宽度，不包括内边距和边框 var imgWidth = inner.offsetWidth; //获取ul var ulObj = inner.children[0]; var timer = null; //鼠标进入消除定时器，停止自动轮播 box.onmouseover = function () { if(timer) clearInterval(timer); } //鼠标离开，开启定时器，自动轮播 var index = 1; box.onmouseout = function () { //无缝效果 timer = setInterval(function () { if (index < ulObj.children.length) { animate(ulObj, -index * imgWidth); //函数在下面 index++; } else { index = 1; ulObj.style.left = 0; } }, 1000); } //保证打开页面后，不用离开box，也能自动轮播 box.onmouseout(); //封装动画函数 设置任意的一个元素，移动到指定的目标位置 function animate(element, target) { //target 是目标位置，即元素的left值 //先清理定时器 clearInterval(element.timeId); //每隔20ms移动一段距离，直到目标位置 //element.timeId设置元素的属性了，不能用var timeId，因为每点一次按钮就会产生一个定时器，叠加后div移动的就快了，不是20ms了 element.timeId = setInterval(function () { //获取div的当前位置 //如果样式的代码在style标签即<style>里设置的，不能用my$("dv").style.left获取 //而是用my$("dv").offsetLeft获取。 //若样式的代码在style属性即style="left:10px"里设置的，my$("dv").style.left和my$("dv").offsetLeft都可获取 var current = element.offsetLeft; //数字类型，没有px //div每次移动多少像素 即步数 var step = 9; //正负，负是当前大于目标，往左走 step = current < target ? step : -step; //每次移动后的位置 current += step; if (Math.abs(target - current) > Math.abs(step)) { //Math.abs()绝对值 //每次移动到的位置 element.style.left = current + "px"; } else { clearInterval(element.timeId); //已经接近目标，直接等于目标，不用再慢慢移动 element.style.left = target + "px"; } }, 10); } </script> </body> </html>