<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>大图滚动</title> <style type="text/css"> *{ margin:0; padding:0; border:0; } .clear{ *zoom:1; } .clear:after{ visibility: none; content:""; display:block; clear:both; height:0; } #wrap{ width: 510px; height:286px; margin:0 auto; position:relative; background: pink; overflow: hidden; } #inner{ width: 1000%; height:100%; position:absolute; left:0; top:0; } #inner img{ width:10%; height:100%; float: left; } .paganation{ width: 100%; position: absolute; bottom:10px; text-align:center; } .paganation span{ padding:5px 8px; background: #F2F2F2; color:red; border-radius:50%; cursor: pointer } .paganation .selected{ background: red; color:white; } .arrow{ position:absolute; top:0; width: 30px; height: 286px; line-height: 286px; text-align: center; color: red; cursor: pointer; } #right{ right: 0; } .arrow:hover{ background: rgba(0,0,0,0.5); } </style> </head> <body> <div id="wrap"><!-- 图片展示区 --> <div id="inner" class="clear"><!-- 所有图片并排的块 --> <img style="background:red;" src="img/1.jpg" alt=""> <img style="background:orange;" src="img/2.jpg" alt=""> <img style="background:green;" src="img/3.jpg" alt=""> <img style="background:cyan;" src="img/4.jpg" alt=""> <img style="background:yellow;" src="img/5.jpg" alt=""> <img style="background:purple;" src="img/6.jpg" alt=""> <img style="background:pink;" src="img/7.jpg" alt=""> <img style="background:blue;" src="img/8.jpg" alt=""> <img style="background:red;" src="img/1.jpg" alt=""> </div> <div class="paganation" id="paganation"><!-- 页面按钮区域 --> <span class ="selected">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> <span>7</span> <span>8</span> </div> <div id="left" class="arrow"><</div><!-- 向左切换按钮 --> <div id="right" class="arrow">></div><!-- 向右切换按钮 --> </div> <script type="text/javascript"> var wrap=document.getElementById("wrap"); var inner=document.getElementById("inner"); var spanList=document.getElementById("paganation").getElementsByTagName("span"); var left=document.getElementById("left"); var right=document.getElementById("right"); var clickFlag=true;//设置左右切换标记位防止连续按 var time//主要用来设置自动滑动的计时器 var index=0;//记录每次滑动图片的下标 var Distance=wrap.offsetWidth;//获取展示区的宽度，即每张图片的宽度 //定义图片滑动的函数 function AutoGo(){ var start=inner.offsetLeft;//获取移动块当前的left的开始坐标 var end=index*Distance*(-1);//获取移动块移动结束的坐标。 //计算公式即当移动到第三张图片时，图片下标为2乘以图片的宽度就是块的left值。 var change=end-start;//偏移量 var timer;//用计时器为图片添加动画效果 var t=0; var maxT=50;//滑动的效率 clear();//先把按钮状态清除,再让对应按钮改变状态 if(index==spanList.length){ spanList[0].className="selected"; }else{ spanList[index].className="selected"; } clearInterval(timer);//开启计时器前先把之前的清 timer=setInterval(function(){ t++; if(t>=maxT){//当图片到达终点停止计时器 clearInterval(timer); clickFlag=true;//当图片到达终点才能切换 } inner.style.left=change/maxT*t+start+"px";//每个17毫秒让块移动 if(index==spanList.length&&t>=maxT){ inner.style.left=0; index=0; //当图片到最后一张时把它瞬间切换回第一张，由于都同一张图片不会影响效果 } },17); } //编写图片向右滑动的函数 function forward(){ index++; //当图片下标到最后一张把小标换0 if(index>spanList.length){ index=0; } AutoGo(); } //编写图片向左滑动函数 function backward(){ index--; //当图片下标到第一张让它返回到倒数第二张， //left值要变到最后一张才不影响过渡效果 if(index<0){ index=spanList.length-1; inner.style.left=(index+1)*Distance*(-1)+"px"; } AutoGo(); } //开启图片自动向右滑动的计时器 time=setInterval(forward,3000); //设置鼠标悬停动画停止 wrap.onmouseover=function(){ clearInterval(time); } wrap.onmouseout=function(){ time=setInterval(forward,3000); } //遍历每个按钮让其切换到对应图片 for(var i=0;i<spanList.length;i++){ spanList[i].onclick=function(){ index=this.innerText-1; AutoGo(); } } //左切换事件 left.onclick=function(){ if(clickFlag){ backward(); } clickFlag=false; } //右切换事件 right.onclick=function(){ if(clickFlag){ forward(); } clickFlag=false; } //清除页面所有按钮状态颜色 function clear(){ for(var i=0;i<spanList.length;i++){ spanList[i].className=""; } } </script> </body> </html>
