<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #box{ width:590px; height: 470px; position: relative; border: 1px solid; margin: 100px auto; } #imgList{ width: 590px; height: 470px; position: relative; list-style: none; } #imgList li{ width: 590px; height: 470px; position: absolute; top: 0; left: 0; display: none; } #num{ width: 590px; height: 50px; position: absolute; bottom: 0; left: 0; background-color: #fdd; line-height: 50px; } #num i{ display: inline-block; width: 20px; height: 20px; margin: 0 10px; background-color: #fff; border-radius: 50%; cursor: pointer; } #prve,#next{ width: 45px; height: 100px; background: pink; position: absolute; top: 0; bottom: 0; margin: auto; color: #fff; text-align: center; line-height: 100px; font-size: 30px; cursor: pointer; } #next{ right: 0; } #box .on{ background-color:aquamarine; } </style> </head> <body> <div id="box"> <ul id="imgList"> <li style="display: block;"><a href="#"><img src="img/1.jpg"></a></li> <li><a href="#"><img src="img/2.jpg"></a></li> <li><a href="#"><img src="img/3.jpg"></a></li> <li><a href="#"><img src="img/4.jpg"></a></li> </ul> <div id="num"> <i class="on"></i> <i></i> <i></i> <i></i> </div> <div id="prve"><</div> <div id="next">></div> </div> <script src="js/tools.js"></script> <script> var imgs = $("li"),//所有的照片 len = imgs.length,//照片的数量 currentIndex = 0,//默认显示第一张 nextIndex = 1,//下一张显示的照片 nums = $("i");//所有的小圆点 // 自动轮播 var timer = setInterval(move,2000); // 鼠标移入自动轮播暂停 $("#box").onmouseenter = function(){ clearInterval(timer); } // 鼠标移出启动计时器进行自动轮播 $("#box").onmouseleave = function(){ timer = setInterval(move,2000); } // 定义图片运动的函数 function move(){ fadeOut(imgs[currentIndex],1000); fadeIn(imgs[nextIndex],1000); nums[currentIndex].className = ""; nums[nextIndex].className = "on"; currentIndex = nextIndex; nextIndex++; if(nextIndex === len) nextIndex = 0; } // 单击上一个和下一个的事件 $("#prve").onclick = function(){ nextIndex = currentIndex-1; if(nextIndex<0) nextIndex = len-1; move(); } $("#next").onclick = move; // 鼠标放在小圆点上,图片切换到对应的图片上 // 第一种 事件委派 /* $("#num").onmouseover = function(e){ var src = e.target; if(src.nodeName === "I"){ var _index = Array.from(nums).indexOf(src); // console.log(_index); if(_index === currentIndex) return; nextIndex = _index; move(); } } */ // 第二种,遍历,i用let定义,为一个块级作用域,for循环会被分为单个的块级作用域,有自己独立的i的值 /* for(let i = 0 ;i<len;i++){ nums[i].onmouseover = function(){ var _index = i; if(_index === currentIndex) return; nextIndex = _index; move(); } } */ // 第三种,也是遍历,在事件外循环类为nums对象加一个属性,用来存i的值 /* for(var i = 0 ;i<len;i++){ nums[i].index = i; nums[i].onmouseover = function(){ var _index = this.index; if(_index === currentIndex) return; nextIndex = _index; move(); } } */ // 第四种,遍历,现将nums对象转换为一个数组,再用数组的indexOf方法获取当前dom元素在nums中的下标 for(var i = 0 ;i<len;i++){ nums[i].onmouseover = function(){ var _index = Array.from(nums).indexOf(this); if(_index === currentIndex) return; nextIndex = _index; move(); } } </script> </body> </html>
其中某些封装的函数,请参考我的另外一篇名为自己封装的tools.js文件的博客。