###主要功能： 1. 图片进行切换(借助定时器) 2. 鼠标移入：则停止轮播，显示上一张下一张按钮 鼠标移出：则继续轮播，隐藏上一张下一张按钮 3. 数字跟着图片一起动 4. 鼠标移入数字上的时候，移入第几个数字，则显示对应的图片 5. 点击上一张，显示上一张图片 点击下一张，显示下一张图片，本文中上一张按钮和下一张按钮用div实现 ###主要原理： 1. 先让图片进行轮播，利用计时器，即 先设置第一张图片显示，其他图片隐藏，当执行第一秒的时候，先让第一张隐藏，让第二张显示，当执行第二秒的时候，让第二张隐藏，第三张显示……依次类推，当执行到最后一张的时候，让最后一张隐藏，第一张显示，反复执行
2. 定义鼠标移入，鼠标移出事件，即 鼠标移入的时候停止计时器工作，让上一张以及下一张的按钮显示(display:block;)，鼠标移出的时侯让计时器继续执行，上一张下一张按钮设置为隐藏（diaplay:none），最好的办法就是将计时器封装在一个函数中，鼠标移出时直接调用函数即可
3. 实现数字轮播，与图片轮播类似，让他们在一个计时器中，保持数字与图片对应状态
4. 鼠标移入数字的时候，让其背景颜色改变并显示对应图片，即 先找到当前轮播的位置，将其图片隐藏，数字背景颜色改变为初始颜色，在找到是哪个数字触发鼠标移入事件，将对应数字的背景颜色改变，图片显示 5. 点击上一张按钮 即让当前的图片隐藏，让上一张图片显示，数字同理，当当前图片为第一张图片时，让最后一张图片显示 6.点击下一张按钮 即让当前图片隐藏，数字背景颜色改变为初始状态，让下一张图片显示，数字背景颜色改为选中状态，当当前图片为最后一张时，让第一张图片显示 ###代码实现 ####1.html代码 <div> <ul class="img"> <li style="display:block;"><img src="./images/a.jpg" alt=""></li> <li><img src="./images/b.jpg" alt=""></li> <li><img src="./images/c.jpg" alt=""></li> <li><img src="./images/d.jpg" alt=""></li> <li><img src="./images/e.jpg" alt=""></li> </ul> <ul class="num"> <li style="background:#b61b1f">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div class="pre"><</div> <div class="next">></div> </div> ####2. css样式 *{ margin:0px; padding:0px; } div{ width:600px; margin:50px auto; position:relative; } ul{ list-style:none; } img{ width:600px; } ul.img li{ display:none; } ul.num{ position:absolute; right:230px; bottom:10px; } ul.num li{ width:20px; height:20px; color:white; margin-left:10px; background:#666; line-height:20px; text-align:center; border-radius:50%; font-family:'微软雅黑'; float:left; } div.pre,div.next{ width:40px; height:70px; line-height:70px; text-align:center; font-size:40px; font-weight:bold; position:absolute; top:100px; background:rgba(0,0,0,.6); color:white; opacity:0.6; display:none; } div.pre{ left:0px; } div.next{ right:0px; } ####3. js代码 #####+获取元素： var img = document.getElementsByTagName('ul')[0].getElementsByTagName('li'); var div = document.getElementsByTagName('div'); var num = document.getElementsByTagName('ul')[1].getElementsByTagName('li'); #####+定义全局变量 var index = 0; //定义一个索引值（类似于数组的下标，从0到数组的长度-1） var len = img.length; //得到长度 var xh = null; //定义循环变量 #####+定义计时器函数： function run(){ //赋给一个全局变量，方便清除计时器时使用
xh = setInterval(function(){ img[index].style.display = 'none'; num[index].style.background = '#666'; index++; //index的判断条件>=len的原因是：当执行到最后一张图片（最后一张图片index=len-1）的时候，index执行++工作，index已经变成len，也就是说当index=len的时候，就应该让index的值重新变为0，使其从第一张开始 if(index>=len){ index=0; } img[index].style.display = 'block'; num[index].style.background = '#b61b1f'; },1000); } run();//先将函数执行以下，让计时器开始工作 #####+鼠标移入移出事件 //div[0]代表的是整个div //div[1]代表上一张的按钮 div[2]代表下一张的按钮 div[0].onmouseover = function(){ clearInterval(xh); div[1].style.display = 'block'; div[2].style.display = 'block'; } div[0].onmouseout = function(){ run(); div[1].style.display = 'none'; div[2].style.display = 'none'; }
#####+ 数鼠标划过，图片与数字对应显示效果 for(var i=0; i<len; i++){ //先给num这个数组对象中每一个元素定义一个index，就是将num[0]=0,num[1]=1……，让它的index就等于每一个元素的下标值 num[i].index = i; //当下标为i的元素触发鼠标划过事件 num[i].onmouseover = function(){ //下面两句的index为全局index，也就是当前界面显示的那个图片的下标值 img[index].style.display = 'none'; num[index].style.background = '#666'; //将数组对象中每个元素的下标值赋给全局index，让当前界面显示的图片的下标等于鼠标划过时数字对应的那个下标 index = this.index; img[index].style.display = 'block'; num[index].style.background = '#b61b1f'; } } //如果容易搞混index也可以这样写 for(var i=0; i<len; i++){ //index就是那个全局变量,num_index就是给num中的每个元素定义的一个变量 num[i].num_index = i; num[i].onmouseover = function(){ img[index].style.display = 'none'; num[index].style.background = '#666'; index = this.num_index; img[index].style.display = 'block'; num[index].style.background = '#b61b1f'; } }
+上一张以及下一张点击事件
div[1].onclick = function() {
img[index].style.display = 'none';
num[index].style.background = '#666';
index--;
//index的判断条件<0的原因是：当执行到第一张图片（最后一张图片index=0）的时候，index执行--工作，index已经变成-1，也就是说当index<0的时候，就应该让index的值重新变为len-1，使其从最后一张开始
if (index < 0) {
index = len-1;
}
img[index].style.display = 'block';
num[index].style.background = '#b61b1f';
}
div[2].onclick = function() {
img[index].style.display = 'none';
num[index].style.background = '#666';
index++;
if (index >= len) {
index = 0;
}
img[index].style.display = 'block';
num[index].style.background = '#b61b1f';
}
###JS全部代码 <script> var img = document.getElementsByTagName('ul')[0].getElementsByTagName('li'); var div = document.getElementsByTagName('div'); var num = document.getElementsByTagName('ul')[1].getElementsByTagName('li'); var index = 0; var len = img.length; var xh = null; var that = null; function run(){ xh = setInterval(function(){ change(one); },1000); } run(); div[0].onmouseover = function(){ clearInterval(xh); div[1].style.display = 'block'; div[2].style.display = 'block'; } div[0].onmouseout = function(){ run(); div[1].style.display = 'none'; div[2].style.display = 'none'; } for(var i=0; i<len; i++){ num[i].index = i; num[i].onmouseover = function(){ that = this; change(three); } } div[1].onclick = function() { change(two); } div[2].onclick = function() {
change(one); } function change(func){ img[index].style.display = 'none'; num[index].style.background = '#666'; func(); img[index].style.display = 'block'; num[index].style.background = '#b61b1f'; } function one(){ index++; if(index>=len){ index=0; } } function two(){ index--; if (index < 0) { index = len-1; } } function three(){ index = that.index; } </script>
