利用js写的图片点击轮播：
关键点： 有向左向右的按钮；需要点击事件；DOM 重在理解
</head>
<style>
.picture-top{
1000px;
height: 300px;
background-color: peachpuff;
position: relative;
overflow: hidden;
}
.banner{
height: 300px;
4000px;
position: relative;
}
img{
500px;
height: 300px;
float: left;
}
img:hover{
cursor: pointer;
transition: 1s;
transform: scale(1.1);
}
.left-btn,.right-btn{
position: absolute;
height: 300px;
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].onclick=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].onclick=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>