<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, ol, li, img { margin: 0; padding: 0; list-style: none; } #box { width: 520px; height: 280px; padding: 5px; position: relative; border: 1px solid #ccc; margin: 100px auto 0; } .ad { width: 520px; height: 280px; overflow: hidden; position: relative; } #box img { width: 520px; } .ad ol { position: absolute; right: 10px; bottom: 10px; } .ad ol li { width: 20px; height: 20px; line-height: 20px; border: 1px solid #ccc; text-align: center; background: #fff; float: left; margin-right: 10px; cursor: pointer; _display: inline; } .ad ol li.current { background: yellow; } .ad ul li { float: left; } .ad ul { position: absolute; top: 0; width: 2940px; } .ad ul li.current { display: block; } #focusD { display: none; } #focusD span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; } #focusD #right { right: 5px; left: auto; } </style> </head> <body> <div id="box" class="all"> <div class="ad"> <ul id="imgs"> <li><img src="images/01.jpg"/></li> <li><img src="images/02.jpg"/></li> <li><img src="images/03.jpg"/></li> <li><img src="images/04.jpg"/></li> <li><img src="images/05.jpg"/></li> </ul> </div> <!--相框--> <div id="focusD"> <span id="left"><</span> <span id="right">></span> </div> </div> <script src="common.js"></script> <script> //获取相框当注册鼠标进入跟离开事件,进入显示左右焦点,离开则消失 my$("box").onmouseover = function () { my$("focusD").style.display = "block"; }; my$("box").onmouseout = function () { my$("focusD").style.display = ""; }; //获取照片的宽度 var width = my$("box").firstElementChild.offsetWidth; //获取左右焦点注册鼠标点击事件 my$("left").onclick = function () { //获取ul当前的位置 var left = my$("imgs").offsetLeft; //ul要移动到的位置 if (left > -2080) { var index = left + -width; animate(my$("imgs"), index) } else { animate(my$("imgs"), -2080) } }; my$("right").onclick = function () { //获取ul当前的位置 var left = my$("imgs").offsetLeft; //ul要移动到的位置 if (left < 0) { var index = left + width; animate(my$("imgs"), index) } else { animate(my$("imgs"), 0) } }; //让指定元素移动到指定的位置 //参数一:要移动的元素 //参数二:想要移动到什么位置 function animate(element, target) { //先清理定时器 clearInterval(element.timeId); //把定时器id存储到element中的一个属性中 element.timeId = setInterval(function () { //获取元素当前所在的位置 var current = element.offsetLeft; //设置每次移动的步数 var step = 10; //判断想要移动到的位置是大于s还是小于当前位置,大于则移动的是整数,小于则是负数 step = target > current ? step : -step; //移动之后的位置 current += step; if (Math.abs(current - target) > Math.abs(step)) { element.style.left = current + "px"; } else { //清理定时器 clearInterval(element.timeId); //直接到达目标 element.style.left = target + "px"; } }, 5) } </script> </body> </html>