<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div {
width: 550px;
height: 700px;
}
#img{
width: 550px;
}
span {
display: inline-block;
height: 20px;
padding-left: 26px;
padding-right: 26px;
margin-left: 1px;
margin-right: 0px;
color: #cdcaca;
border-left: 1px #aba2a2 solid;
}
</style>
</head>
<body>
<div id="div" onmouseover="stop()" onmouseout="start()">
<div>
<img id="img" src="img/1.jpg">
</div>
<div id="span" style="background-color: aliceblue;">
<span id="i1" onclick="number('img/1.jpg')">1</span>
<span id="i2" onclick="number('img/2.jpg')">2</span>
<span id="i3" onclick="number('img/3.jpg')">3</span>
<span id="i4" onclick="number('img/4.jpg')">4</span>
<span id="i5" onclick="number('img/5.jpg')">5</span>
<span id="i6" onclick="number('img/6.jpg')">6</span>
<span id="i7" onclick="number('img/7.jpg')">7</span>
<span id="i8" onclick="number('img/8.jpg')">8</span>
</div>
</div>
</body>
<script>
//点击切换
function number(im) {
document.getElementsByTagName("img")[0].src = im;
}
var i=0;
var arr =["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg",
"img/5.jpg","img/6.jpg","img/7.jpg","img/8.jpg"]
//console.log(img)
//自动切换
function automatic() {
document.getElementById("img").src = arr[i];
i++;
if(i==arr.length){
i=0;
}
}
var id = window.setInterval(automatic, 1000);
function stop(){
window.clearTimeout(id);
}
function start(){
id = window.setInterval(automatic, 1000);
}
</script>
</html>
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
