不知道因为什么原因,只要把代码复制到这里,就会少一些字,应该是字符串过滤了, 可以看我的其他博客, 如果不管用,可以选择下面的网址,可以直接复制这用 http://www.52xunyi.com/?p=86 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>自动播放焦点图</title> <style> * { margin: 0; padding: 0; } .box { width: 500px; height: 200px; margin: 0 auto; position: relative; overflow: hidden; } .box .ul1 { width: 600%; list-style: none; position: absolute; } .box .ul1 li { float: left; } .box ol { list-style: none; position: absolute; top: 170px; left: 328px; display: block; } .box ol li { float: left; height: 20px; width: 20px; background: #eee; margin-left: 10px; text-align: center; line-height: 20px; cursor: pointer; } .box .ul2{ list-style: none; position: absolute; top: 80px; left: 0; display: none; } .box .ul2 li { float: left; height: 40px; width: 40px; background: #ccc; text-align: center; line-height: 40px; opacity: 0.5; filter: alpha(opacity=50); cursor: pointer; } .box .ul2 .ul2Li2 { margin-left: 420px; } .box ol .current { background: #f00; color: #fff; } </style> </head> <body> <div id="box" class="box"> <ul class="ul1"> <li><img src="./images/1.jpg" alt=""></li> <li><img src="./images/2.jpg" alt=""></li> <li><img src="./images/3.jpg" alt=""></li> <li><img src="./images/4.jpg" alt=""></li> <li><img src="./images/5.jpg" alt=""></li> </ul> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <ul class="ul2"> <li><</li> <li>></li> </ul> </div> <script> //需求:无缝滚动。 //思路:赋值第一张图片放到ul的最后,然后当图片切换到第五张的时候 //直接切换第六章,再次从第一张切换到第二张的时候先瞬间切换到 //第一张图片,然后滑动到第二张 //1.获取事件源及相关元素。(老三步) //2.复制第一张图片所在的li,添加到ul的最后面。 //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。 //4.鼠标放到ol的li上切换图片 //5.添加定时器 //6.左右切换图片(鼠标放上去隐藏,移开显示) //1.获取事件源及相关元素。(老三步) // 获取盒子 var box = document.getElementById('box'); // 获取ul1 var ul1 = box.getElementsByTagName('ul')[0]; // 获取图片宽度,其实就是box的宽度,不过最好是获取图片的宽度,这样子更好理解,但是我的图片没有设置宽度,所以只可以用box的宽度 // var imgWidth = ul1.children[0].children[0].offsetWidth; var imgWidth = box.offsetWidth; // 图片个数 var imgArr = ul1.children; console.log(imgArr); // 获取ul2 var ul2 = box.getElementsByTagName('ul')[1]; // 获取索引盒子 var olLiArr = box.getElementsByTagName('ol')[0].children; // console.log(olLiArr); // 获取左右箭头 var ul2Li2Left = ul2.firstElementChild || ul2.firstChild; var ul2Li2Right = ul2.lastElementChild || ul2.lastChild; // console.log(ul2Li2Right); //2.复制第一张图片所在的li,添加到ul的最后面。 var newUl1Li1 = ul1.children[0].cloneNode(true); console.log(newUl1Li1); ul1.appendChild(newUl1Li1); // console.log(ul1.children[5]); //3.给ol中添加li,ul中的个数-1个,并点亮第一个按钮。 // 点亮盒子,排他思想,干掉其他人,剩下我自己 olLiArr[0].className = "current"; for(var i = 0; i < olLiArr.length; i++){ // 采用给小盒子增加属性的方式,用来平移ul1 olLiArr[i].index = i; olLiArr[i].onmouseover = function(){ // 当鼠标放到小盒子上面的时候,干掉其他人的类, for(var i = 0; i < olLiArr.length; i++){ olLiArr[i].removeAttribute("class"); } // 然后给自己设置类名 this.className = "current"; //4.鼠标放到ol的li上切换图片 //鼠标放到哪个小盒子上面就显示哪张图片 console.log(this.index); // 鼠标放到那个就把自动播放的key变成哪个 key = square = this.index; // ul1.style.left = "200px"; animate(ul1,-this.index*imgWidth); // console.log(1); } } //5.添加定时器 //固定向右切换图片 //两个定时器(一个记录图片,一个记录小方块) var key = 0; var square = 0; function autoPlay () { // 设置定时器移动位置 // ul1.style.left = -key*imgWidth + "px"; // 判断key的值,如果key的值大于了图片的个数,那么就把key设置为0,并瞬间移动盒子到left = 0; if(key > imgArr.length - 1 ){ // 如果感到很生硬,那么应该先瞬间跳转到第一张,然后直接执行第二张 ul1.style.left = 0; key = 1; } animate(ul1,-key*imgWidth); key++; // 让小盒子点亮 // 因为小盒子只有5个,所以当square变为5之前就要改变为0; if (square > olLiArr.length - 1) { square = 0; } for (var i = 0;i<olLiArr.length; i++) { olLiArr[i].className = ""; } olLiArr[square].className = "current"; square++; } var timer = null; timer = setInterval(autoPlay,1000); //6.左右切换图片(鼠标放上去隐藏,移开显示) box.onmouseover = function () { ul2.style.display = "block"; clearInterval(timer); } box.onmouseout = function () { clearInterval(timer); ul2.style.display = "none"; timer = setInterval(autoPlay,1000); } // 左右切换图片 ul2Li2Right.onclick = function () { autoPlay(); } ul2Li2Left.onclick = function () { //先移动到最后一张,然后key的值取之前一张的索引值,然后在向前移动 //为了保证不移动的那么的生硬,当key小于0的时候,把图片设置为最后一张,然后key的值取前一张的索引值,然后再次执行匀速动画 key--; if(key < 0){ ul1.style.left = -imgWidth*(imgArr.length-2) + "px"; key = imgArr.length - 2; } animate(ul1,-key*imgWidth); // 控制小盒子 square --; if(square < 0){ square = olLiArr.length - 1; } for(var i = 0; i < olLiArr.length; i++){ olLiArr[i].className = ""; } olLiArr[square].className = "current"; } // 匀速运动切换函数 function animate(element,target){ // 用到定时器,先清定时器,把定时器当作元素的一个属性绑定到自身 clearInterval(element.timer); // 1.用定时器的思想, // 2.获取步长,如果目标值大于原始位置,则步长为正值,否则为负值 var step = target > element.offsetLeft ? 10:-10; element.timer = setInterval(function(){ // 3.设置offsetWidth给left, element.style.left = element.offsetLeft + step + "px"; var result = target - element.offsetLeft; // 4.判断目标值和盒子的位置,如果小于步长,则停止计时器,并瞬间把盒子的left设置为目标值 if(Math.abs(result) <= Math.abs(step)){ element.style.left = target + "px"; clearInterval(element.timer); } },10); } </script> </body> </html>
不知道因为什么原因,只要把代码复制到这里,就会少一些字,应该是字符串过滤了,可以看我的其他博客
http://www.52xunyi.com/?p=86