目录
设置大体样式
图片播放
完整代码
设置大体样式
<input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left">
<img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()">
<input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right">将图片设置为相对定位，按钮设置为绝对定位，这样就可以将按钮镶嵌在图片中
<style type="text/css">#imgs{position: relative;}.right,.left{position: absolute;top:230px;border-radius:50%}.right{left:575px ;}
</style>
图片播放
var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"]; var index =0 ; function pre(){var img = document.getElementById("imgid"); if(index == 0){index = 5;}index-=1;img.src = imgArr[index];}function next(){var img = document.getElementById("imgid"); if(index == 4){index = -1;}index+=1;img.src = imgArr[index];
}添加dom对象，将图片存入数组中，用下标来访问图片内容
var t;
function start(){t = setInterval(next,1000)
}
function stop(){clearInterval(t);
}设置自动播放的事件， 并添加onmouseover和onmouseout事件，当鼠标放在图片或者按钮上，停止自动播放，离开后开始自动播放
完整代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#imgs{position: relative;}.right,.left{position: absolute;top:230px;border-radius:50%}.right{left:575px ;} </style></head><body><script> var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"]; var index =0 ; function pre(){var img = document.getElementById("imgid"); if(index == 0){index = 5;}index-=1;img.src = imgArr[index];}function next(){var img = document.getElementById("imgid"); if(index == 4){index = -1;}index+=1;img.src = imgArr[index];}var t;function start(){t = setInterval(next,1000)}function stop(){clearInterval(t);}</script> <input type="button" value="<" id="pre" onclick="pre()" onmouseover="stop()" onmouseout="start()" class="left"><img src="../img/1.jpg" id="imgid" onmouseover="stop()" onmouseout="start()"><input type="button" value=">" id="next" onclick="next()" onmouseover="stop()" onmouseout="start()" class="right"></body>
</html>
