目录
设置大体样式
html
<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">
将图片设置为相对定位,按钮设置为绝对定位,这样就可以将按钮镶嵌在图片中
css
<style type="text/css">
#imgs{
position: relative;
}
.right,.left{
position: absolute;
top:230px;
border-radius:50%
}
.right{
left:575px ;
}
</style>
图片播放
javascript
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对象,将图片存入数组中,用下标来访问图片内容
javascript
var t;
function start(){
t = setInterval(next,1000)
}
function stop(){
clearInterval(t);
}
设置自动播放的事件, 并添加onmouseover和onmouseout事件,当鼠标放在图片或者按钮上,停止自动播放,离开后开始自动播放
完整代码
html
<!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>