<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> *{ padding: 0; margin: 0px; } #wrap{ width:533px; height:300px; position: relative; overflow: hidden; margin: 30px auto; } #wrap img{ width:533px; height: 300px; position: absolute; top: 0px; left: 0px; } #wrap img:nth-child(2), #wrap img:nth-child(3),#wrap img:nth-child(4){ opacity: 0; } .paginations{ position: absolute; bottom: 7px; width: 100%; } .paginations ul{ text-align: center; } .paginations ul li{ display: inline-block; width: 14px; height: 14px; margin: 3px 7px; } .add{ background: url('images/蘑菇街.png') no-repeat -100px -20px; } #preButton{ background: url('images/蘑菇街.png') no-repeat 0 0; width: 28px; height: 45px; position: absolute; top: 50%; margin-top: -23px; left: 0px; opacity: 0.7; visibility: hidden; } .backg { background: url('images/蘑菇街.png') no-repeat -160px -20px; } #nextButton{ background: url('images/蘑菇街.png') no-repeat -50px 0; width: 28px; height: 45px; position: absolute; top: 50%; margin-top: -23px; right: 0px; opacity: 0.7; visibility: hidden; } </style> </head> <body> <div id="wrap"> <img src="images/1.jpg" alt=""> <img src="images/2.jpg" alt=""> <img src="images/3.jpg" alt=""> <img src="images/4.jpg" alt=""> <div class="paginations"> <ul> <li class='backg'></li> <li class='add'></li> <li class='add'></li> <li class='add'></li> </ul> </div> <div id="preButton"></div> <div id="nextButton"></div> </div> </body> <script type="text/javascript"> var wrap=document.getElementById('wrap'); var paginations=document.querySelectorAll('.paginations ul li'); var preButton=document.getElementById('preButton'); var nextButton=document.getElementById('nextButton'); var pictures=document.querySelectorAll('#wrap img'); var change=233; var timer; //nowNum是当前显示的图片下标 var nowNum=1; //holdNum是待显示的图片下标 var holdNum=0; //oncliable控制点击事件是否可点，true可点，false不可点 var oncliable=true; function animationProcess(){ var step=0; var maxStep=40; pictures[holdNum].style.left=change+'px'; if (timer) { clearInterval(timer); } timer=setInterval(function(){ step++; pictures[nowNum].style.opacity=1-1/maxStep*step; pictures[nowNum].style.left=-change/maxStep*step+'px'; pictures[holdNum].style.opacity=1/maxStep*step; pictures[holdNum].style.left=change-change/maxStep*step+'px'; if (step==maxStep) { clearInterval(timer); nowNum=holdNum; //每次切图完毕，开启可点击事件 oncliable=true; } },16) } //分页符滚动函数 var timer1; function paginationsRotate(holdNum) { clearInterval(timer1); var deg=1.8; timer1=setInterval(function(){ deg+=1.8; if (deg>=360) { clearInterval(timer1); } paginations[holdNum].style.transform='rotateZ('+deg+'deg)'; },10) } paginationsRotate(0); //分页符随着图的滚动换背景图片函数 function backgroundChange(holdNum){ for (var i = 0; i < paginations.length; i++) { paginations[i].className='add'; console.log(i); // paginations[i].style.background="url('images/蘑菇街.png') no-repeat -100px -20px"; } paginations[holdNum].className='backg'; } //图片切换 var timerOut=null; function picturesLoop(){ if (timerOut) { clearInterval(timerOut); } console.log('pp'); paginationsRotate(holdNum); backgroundChange(holdNum); animationProcess(); timerOut=setInterval(function(){ console.log('pp'); nowNum=holdNum; holdNum++; if (holdNum==pictures.length) { holdNum=0; } paginationsRotate(holdNum); backgroundChange(holdNum); animationProcess(); },2000) } picturesLoop(); //给分页符设点击事件，使图片切换到对应的位置 for (var i = 0; i < paginations.length; i++) { paginations[i].index=i paginations[i].onmouseover=function(){ //如连续点击同一个分页符，跳出点击事件 if (holdNum==this.index) { var oncliable2=false; if (!oncliable2) { return; } } if (!oncliable) { return; } oncliable=false; clearInterval(timerOut); clearInterval(timer); holdNum=this.index; paginationsRotate(holdNum); backgroundChange(holdNum); animationProcess(); } } //上分页 function pre(){ preButton.onclick=function (){ if (!oncliable) { return; } oncliable=false; nowNum=holdNum; holdNum--; if (holdNum<0) { holdNum=pictures.length-1; } paginationsRotate(holdNum); backgroundChange(holdNum); animationProcess(); } } //下分页 function next(){ nextButton.onclick=function (){ if (!oncliable) { return; } oncliable=false; nowNum=holdNum; holdNum++; if (holdNum==pictures.length) { holdNum=0; } paginationsRotate(holdNum); backgroundChange(holdNum); animationProcess(); } } //当鼠标放在图片上时，图片切换停止，上下分页图标显示，调用上下分页函数 wrap.onmouseover=function(){ clearInterval(timerOut); preButton.style.visibility='visible'; nextButton.style.visibility='visible'; next(); pre(); } //当鼠标离开图片是，图片切换重新开始，上下分页图标隐藏 wrap.onmouseleave=function(){ picturesLoop(); preButton.style.visibility='hidden'; nextButton.style.visibility='hidden'; } </script> </html>