利用js写的图片点击轮播：
关键点： 有向左向右的按钮；需要点击事件；DOM 重在理解
</head>
<style> .picture-top{ width: 1000px; height: 300px; background-color: peachpuff; position: relative; overflow: hidden; } .banner{ height: 300px; width: 4000px; position: relative; } img{ width:500px; height: 300px; float: left; } img:hover{ cursor: pointer; transition: 1s; transform: scale(1.1); } .left-btn,.right-btn{ position: absolute; height: 300px; width: 40px; background-color: gainsboro; z-index: 999; line-height: 300px; font-size: 30px;. text-align:center; opacity: 0.5; font-weight: bold; } .left-btn{ left: 0px; top: 0px; } .right-btn{ right: 0px; top: 0px; } </style> <body> <div class="picture-top"> <div class="left-btn"><<</div> <div class="right-btn">>></div> <div class="banner"> <img src="picture-top/lsrd4.jpg" title="鲁山溶洞群" ;/> <img src="picture-top/ls1.jpg" title="鲁山公园"/> <img src="picture-top/fhs2.jpg" title="凤凰山"/> <img src="picture-top/nlzn3.jpg" title="牛郎织女洞"/> <img src="picture-top/sfs1.jpg" title="圣佛山"/> <img src="picture-top/sqg1.jpg" title="神清宫"/> <img src="picture-top/yryz2.jpg" title="猿人遗址"/> <img src="picture-top/ls3.jpg" title="鲁山溶洞群"/> </div> </div> </body></html><script> var arr=Array(); var speed=20; var count=1; document.getElementsByClassName("right-btn")[0].οnclick=function(){ arr.push(window.setInterval("moveToLeft()",10)); } function moveToLeft(){ var b=document.getElementsByClassName("banner")[0]; if(b.offsetLeft>count*(-1000)&&count<4){ b.style.marginLeft=b.offsetLeft-speed+"px"; } else{ if(count<4){ count++; } for(var i in arr){ window.clearInterval(arr[i]); } } } document.getElementsByClassName("left-btn")[0].οnclick=function(){ arr.push(window.setInterval("moveToRight()",10)); } function moveToRight() { var b = document.getElementsByClassName("banner")[0]; if(b.offsetLeft < (count-2) * (-1000)&&count>1) { b.style.marginLeft = b.offsetLeft + speed + "px"; } else { if(count>1) {count--;} for(var i in arr) { window.clearInterval(arr[i]); } } } </script>