css代码:javascript
#container{ width: 1200px; height: 400px; margin:0 auto; overflow: hidden;/*超出的图片垂直方向隐藏,水平方向也隐藏*/ position: relative;/*提供给子元素定位*/ } #list{ width: 7200px; height: 400px; position: absolute; } #list img{ float:left; } #buttons{ position: absolute;/*参照父元素进行绝对定位*/ height: 10px; width: 100px; z-index: 2; bottom: 20px; margin: auto; left: 0; right: 0; } #buttons span{ cursor: pointer; display: inline-block; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; float: left; } #buttons .on{ background-color: #5c307d; } .arrow{ cursor: pointer; line-height: 40px; text-align: center; font-size: 36px; width: 40px; height: 40px; position: absolute; z-index: 2; margin:auto; top:0; bottom: 0; background-color: #d8d9d8; color: #ffffff; text-decoration: none; border-radius: 50%; display: none; } .arrow:hover{ background-color: #b2afaf; } #container:hover .arrow{ display: inline-block; } #prev{ left: 20px; } #next{ right: 20px; }
html代码:css
<div id="container"> <div id="list" style="left:0px;"> <img src="1.jpg" alt="1"> <img src="2.jpg" alt="2"> <img src="3.jpg" alt="3"> <img src="4.jpg" alt=".4"> <img src="5.jpg" alt="5"> </div> <div id="buttons"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <div style="clear: both;"></div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a> </div>
第二步:给前一张,下一张添按钮添加事件:html
<script type="text/javascript"> //下一页 window.onload=function(){ var list=document.getElementById("list");//获取相册div,便于移动相册框的图片 var prev=document.getElementById('prev');//前一张图片按钮 var next=document.getElementById('next');//下一页按钮 next.onclick=function(){ if(!(parseInt(list.style.left)<=-4800)){//向超过第5张图片不能继续向右 list.style.left=parseInt(list.style.left)-1200+"px"; } }; prev.onclick=function(){ if((parseInt(list.style.left)<0)){//向左超过第1张图片不能继续向左 list.style.left=parseInt(list.style.left)+1200+"px"; } }; }; </script>
第三步:封装简化点击按钮事件(js部分,其余没有改变)前端
<script type="text/javascript"> window.onload=function(){ var list=document.getElementById("list");//获取相册div,便于移动相册框的图片 var prev=document.getElementById('prev');//前一张图片按钮 var next=document.getElementById('next');//下一页按钮 //上一页,下一页点击按钮函数 function animate(offset){ var left=list.style.left;//图片位置 var leftOffset=parseInt(left);//图片偏移量 if (offset==-1200) { if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右 left=(leftOffset+offset)+'px'; list.style.left=left; } return; } if (offset==1200) { if((leftOffset<0)){//向左超过第1张图片不能继续向左 left=(leftOffset+offset)+"px"; list.style.left=left; } }
} next.onclick=function(){ animate(-1200); }; prev.onclick=function(){ animate(1200); }; };
</script>java
第四步:图片切换对应小按钮样式改变函数
<script type="text/javascript"> window.onload=function(){ var list=document.getElementById("list");//获取相册div,便于移动相册框的图片 var prev=document.getElementById('prev');//前一张图片按钮 var next=document.getElementById('next');//下一页按钮 var index=1;//默认小按钮为1 var buttons=document.getElementById("buttons").getElementsByTagName('span'); //上一页,下一页点击按钮函数 function animate(offset){ var left=list.style.left;//图片位置 var leftOffset=parseInt(left);//图片偏移量 if (offset==-1200) { if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右 left=(leftOffset+offset)+'px'; list.style.left=left; } return; } if (offset==1200) { if((leftOffset<0)){//向左超过第1张图片不能继续向左 left=(leftOffset+offset)+"px"; list.style.left=left; } } } //按钮样式改变函数 function showButton(){ for (var i = 0; i <buttons.length; i++) { if (buttons[i].className=="on") { buttons[i].className=""; break; } } buttons[index-1].className="on"; } next.onclick=function(){ if (index==5) {//若是小按钮已经到了第五个小按钮,下一个小按钮切换回1 index=1; }else{//不是第五个,就继续++ index+=1; } animate(-1200); showButton(); }; prev.onclick=function(){ if (index==1) {//若是小按钮已经到了第1个小按钮,上一个小按钮切换回5 index=1; }else{//不是第1个,就继续-- index-=1; } animate(1200); showButton(); }; }; </script>
第五步:图片无限左右切换优化
<script type="text/javascript"> window.onload=function(){ var list=document.getElementById("list");//获取相册div,便于移动相册框的图片 var prev=document.getElementById('prev');//前一张图片按钮 var next=document.getElementById('next');//下一页按钮 var index=1;//默认小按钮为1 var buttons=document.getElementById("buttons").getElementsByTagName('span'); //上一页,下一页点击按钮函数 function animate(offset){ var left=list.style.left;//图片位置 var leftOffset=parseInt(left);//图片偏移量 if (offset==-1200) { if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右 left=(leftOffset+offset)+'px'; list.style.left=left; } if (leftOffset==-4800) {//超过第5张得时候从新回到第一张 list.style.left=0+'px'; index=1;//更新一下按钮 } return; } if (offset==1200) { if((leftOffset<0)){//向左超过第1张图片不能继续向左 left=(leftOffset+offset)+"px"; list.style.left=left; } if (leftOffset==0) {//超过第1张得时候从新回到第5张 list.style.left=-3600+'px'; index=5;//更新一下按钮 } } } //按钮样式改变函数 function showButton(){ for (var i = 0; i <buttons.length; i++) { if (buttons[i].className=="on") { buttons[i].className=""; break; } } buttons[index-1].className="on"; } next.onclick=function(){ if (index==5) {//若是小按钮已经到了第五个小按钮,下一个小按钮切换回1 index=1; }else{//不是第五个,就继续++ index+=1; } animate(-1200); showButton(); }; prev.onclick=function(){ if (index==1) {//若是小按钮已经到了第1个小按钮,上一个小按钮切换回5 index=1; }else{//不是第1个,就继续-- index-=1; } animate(1200); showButton(); }; }; </script>
第六步:小按钮的点击事件动画
<script type="text/javascript"> window.onload=function(){ var list=document.getElementById("list");//获取相册div,便于移动相册框的图片 var prev=document.getElementById('prev');//前一张图片按钮 var next=document.getElementById('next');//下一页按钮 var index=1;//默认小按钮为1 var buttons=document.getElementById("buttons").getElementsByTagName('span'); //上一页,下一页点击按钮函数 function animate(offset,jump="num"){ var left=list.style.left;//图片位置 var leftOffset=parseInt(left);//图片偏移量 if (offset==-1200&&jump=="num") { if(!(leftOffset<=-4800)){//向超过第5张图片不能继续向右 left=(leftOffset+offset)+'px'; list.style.left=left; } if (leftOffset==-4800) {//超过第5张得时候从新回到第一张 list.style.left=0+'px'; index=1;//更新一下按钮 } return; } if (offset==1200&&jump=="num") { if((leftOffset<0)){//向左超过第1张图片不能继续向左 left=(leftOffset+offset)+"px"; list.style.left=left; } if (leftOffset==0) {//超过第1张得时候从新回到第5张 list.style.left=-3600+'px'; index=5;//更新一下按钮 } return; } if (parseInt(jump)>0) {//向右跳转 var offsetjump=-1200*jump; left=(leftOffset+offsetjump)+'px'; list.style.left=left; return; } if (parseInt(jump)<0) {//向左跳转 var offsetjump=-1200*jump; left=(leftOffset+offsetjump)+'px'; list.style.left=left; return; } } //按钮样式改变函数 function showButton(){ for (var i = 0; i <buttons.length; i++) { if (buttons[i].className=="on") { buttons[i].className=""; break; } } buttons[index-1].className="on"; } next.onclick=function(){ if (index==5) {//若是小按钮已经到了第五个小按钮,下一个小按钮切换回1 index=1; }else{//不是第五个,就继续++ index+=1; } animate(-1200); showButton(); }; prev.onclick=function(){ if (index==1) {//若是小按钮已经到了第1个小按钮,上一个小按钮切换回5 index=1; }else{//不是第1个,就继续-- index-=1; } animate(1200); showButton(); }; //为每一个小按钮绑定事件 for (var i = 0; i <buttons.length; i++) { buttons[i].onclick=function(){ var myIndex=parseInt(this.getAttribute('index'));//当前按钮下标 if(myIndex-index>0){//向右偏移 animate(-1200,myIndex-index); index=myIndex;//更新按钮 showButton(); }else{ animate(1200,myIndex-index); index=myIndex;//更新按钮 showButton(); } } } }; </script>
第七步:优化小按钮(点击同一个按钮不触发事件)this
if (this.className=="on") { return; } 在buttoms循加入 第八步:给点击事件加动画