大图滚动效果
ps：图片大小200*200；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大图滚动效果</title> </head> <style> body { background: skyblue; } .pic{ width: 200px; height: 200px; margin: 50px auto; border: 1px red solid; overflow: hidden; } .imgs { width: 800px; height: 200px; } .imgs img { width: 200px; height: 200px; float: left; } .but { width: 350px; height: 50px; margin: 10px auto; border: 1px red solid; text-align: center; } .but span { font-size: 40px; padding-right: 15px; cursor: hand; cursor: pointer; } .select { color: red; } </style> <body> <div id="pic" class="pic"> <div class="imgs"> <img src="img/1.png" alt=""> <img src="img/2.png" alt=""> <img src="img/3.png" alt=""> <img src="img/4.png" alt=""> </div> </div> <div class="but" id="but"> <span><--</span> <span class="select">1</span> <span>2</span> <span>3</span> <span>4</span> <span>--></span> </div> <!-- =================================================================================================================================== --> <script> var pic = document.getElementById('pic'); var pics = pic.getElementsByTagName('img'); var btns = document.getElementById('but').getElementsByTagName('span'); var autoNum = 0; //当前图片的索引值 var imgWidth = 200; //图片宽度 var time = null; //第一个计时器，用于实现当前位置到新位置的运动过程 var time2 = null; //第二个计时器，用于实现多次滚动的发生 window.onload = clock; //文档加载完成后，加载clock函数 function moveTo(startPos,endPos){ if(time){ clearInterval(time); } var startPos = startPos; var endPos = endPos; var step = 0; var stepMax = 50; var everyStep = (endPos - startPos) / stepMax; time = setInterval(move,25); function move(){ step++; pic.scrollLeft += everyStep; if(step == stepMax){ pic.scrollLeft = endPos; clearInterval(time); } } } function autoMove(){ autoNum++; if(autoNum == pics.length){ autoNum = 0; } if(autoNum == -1){ autoNum = pics.length - 1; } btncolor(); moveTo(pic.scrollLeft,imgWidth * autoNum); } for(var i = 1;i < btns.length -1;i++){ btns[i].onclick = function(){ clearClock(); for(var j = 1;j < btns.length - 1;j++){ if(this == btns[j]){ autoNum = j - 1; btncolor(); moveTo(pic.scrollLeft,imgWidth * (j - 1)); } } clock(); } } btns[0].onclick = function(){ clearClock(); autoNum -= 2; //在autoMove中会加1，因此此处减2 autoMove(); clock(); } btns[btns.length - 1].onclick = function(){ clearClock(); autoMove(); clock(); } function clock(){ //需要大于1250，原因在moveTo函数中50*25=1250，否则会使计时器重复调用 time2 = setInterval(autoMove,3000); } function clearClock(){ if(time2){ clearInterval(time2); } } function btncolor(){ //从1开始是因为有左键<-- for(var k = 1;k < btns.length - 1;k++){ btns[k].style.color = 'black'; } btns[autoNum + 1].style.color = 'red'; } </script> </body> </html>
效果图：
