<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/elementinit.css"> <style> .wrap{ position:relative; width:600px; height:500px; margin:20px auto; overflow:hidden; } .photo{ position:absolute; left:-600px; width:9999px; height:500px; } .photo img{ float:left; width:600px; height:500px; } .prev,.next{ width:38px; height:78px; position:absolute; top:225px; } .prev{ background:url(img/indexNew-bg.png) 0 -51px no-repeat; } .next{ right:0; background:url(img/indexNew-bg.png) -43px -51px no-repeat; } .btns{ position:absolute; bottom:30px; right:90px; } .btns li{ width:10px; height:10px; border:2px solid deepskyblue; background:transparent; border-radius:50%; margin:10px; float:left; } </style></head><body> <div class="wrap"> <div class="photo"> <img src="img/4.jpg" > <img src="img/1.jpg" > <img src="img/2.jpg" > <img src="img/3.jpg" > <img src="img/4.jpg" > <img src="img/1.jpg" > </div> <div class="prev"></div> <div class="next"></div> <ul class="btns"> <li></li> <li></li> <li></li> <li></li> </ul> </div></body><script> var photo = document.querySelector(‘.photo‘); var prev = document.querySelector(‘.prev‘); var next = document.querySelector(‘.next‘); var btns = document.querySelectorAll(‘.btns li‘); var index = 1 ;//图片的下标从1开始.而不是从零开始.` var timer = null; var bol = true; btns[0].style.background = ‘orange‘; next.onclick = function(){ clearInterval(timer); //如果 bol 是false 返回(return)执行程序,否则就让 bol = false; //总体的意思就是:当点击两下的时候让 bol = false; 阻止连续执行两下.() //相当于是开关,如果是关闭的状态,就返回重新执行代码,否则的话,就让开关关闭(也就是bol=false),关闭的话就阻止了连续点击行为. if(bol==false){ return; }else{ bol = false; } //方便起见,这个邮件的代码和左键的一个效果只不过是下面那段简化而已. index ++; //这个 if 判断的代码要注意.图的轮播是4张图片,而布局确是6张,让 left = 0;让下标等于1,这就实现了无缝轮播(中间切换用函数,16毫秒进行切换) if(index >4){ photo.style.left = ‘0px‘; index = 1;//第一个图的下标是1,但是第一个图的left值是600.
} for(var j = 0 ; j < btns.length; j ++){ btns[j].style.background = ‘transparent‘; } btns[index-1].style.background = ‘orange‘;//这里的[index-1]是同步num和index的.也就是在点击左键时候.btn切换能同步. animate();//图片切换时候的函数. autoPlay();//自动轮播 } prev.onclick = function(){ clearInterval(timer); if(!bol){ return; } bol = false; index --; //这个判断方式与图片的布局也有关系,如果布局不是这样就答案不到轮播的效果. if(index < 1){ index = 4; photo.style.left = ‘-3000px‘; //这个-3000显示的是第六张(最后一张)图片,而不是所谓的img/4.jpg这张, } //通过循环遍历四个按钮. for(var j = 0 ; j < btns.length; j ++){ btns[j].style.background = ‘transparent‘; } console.log(index) btns[index-1].style.background = ‘orange‘; animate(); autoPlay(); } //下面的四个按钮 //底层点击的小按钮,外层循环添加下标, for(var i = 0 ; i < btns.length; i ++){ btns[i].num = i;//这里的num相当于index btns[i].onclick = function(){ clearInterval(timer); if(!bol){ return; } bol = false; for(var j = 0 ; j < btns.length; j ++){ btns[j].style.background = ‘transparent‘; } this.style.background = ‘orange‘; index = this.num +1; animate(); autoPlay(); } } // console.log(btns) function animate(){ var start = photo.offsetLeft; //console.log(start); //起始位置,每次photo.offsetLeft;都不一样,轮播一个图片就变一次. var end = index * -600; //结束位置 var change = end - start;//改变量 var startstep = 0;//开始步数 var endstep = 38; //结束步数 //这个参数可以调节图片滑动的速度 var timer = setInterval(function(){ startstep ++; if(startstep >=endstep){ clearInterval(timer); bol = true;//这里的 bol = true 也会是打开开关!必须加,否则就左右点击按钮不能进行下一次点击. } //注意下边的操作要放到定时器里边 photo.style.left = start + change /endstep *startstep + ‘px‘; // 100 = 改变 + 不变 / 不变 * 改变 // 100 = 100 + 600 / 50 * 0 // 112 = 100 + 600 / 50 * 1 // 124 = 100 + 600 / 50 * 2 // 136 = 100 + 600 / 50 * 3 // 148 = 100 + 600 / 50 * 4 // 160 = 100 + 600 / 50 * 5 // change /endstep *startstep 从左到右一次运算. // 该变量/总步数 * 改变步数 = (每步改变的量) * 改变的步数 = 该变量 },16); //定时器的作用就是,16毫秒内完成50步的该变量. } function autoPlay(){ timer = setInterval(function(){ index ++; if(index >4){ index = 1; photo.style.left = ‘0px‘; } for(var j = 0 ; j < btns.length; j ++){ btns[j].style.background = ‘transparent‘; }
btns[index-1].style.background = ‘orange‘; animate(); //自动轮,调用animate();实现切换页面; },2000) } autoPlay(); //console.log(timer)</script></html>
时间： 2024-11-02 09:18:17