<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片2s自动切换</title>
<script type="text/javascript">
var img = ["image/mao1.jpg","image/mao2.jpg","image/mao3.jpg"]
var nums=0
function change() {
nums++
if (nums === 3) {nums = 0}
document.getElementById("mao").src =img[nums]
}
setInterval("change()", 2000)
function image(n) {
document.getElementById("mao").src = img[n]}
</script>
<style type="text/css">
ul{
/*border:1px solid red;*/
float: left;
margin-top:5px;
margin-left:100px;
}
ul li{
float:left ;
margin:0 20px;
}
</style>
</head>
<body >
<div >
<img id="mao" src="image/mao1.jpg" width="400" height="200">
</div>
<div>
<ul type="circle">
<li onmouseover="image(0)"></li>
<li onmouseover="image(1)"></li>
<li onmouseover="image(2)"></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2s</title>
<style type="text/css">
#adv{
border: 1px solid blue;
height: 470px;
width: 590px;
background-image: url("image/mao1.jpg");
}
#adv ul {
list-style-type: circle;
/*border: 1px solid red;*/
margin-top: 440px;
}
#adv ul li {
float: left;
}
</style>
<script type="text/javascript">
index = 1
function roleImage() {
index++
if(index===4){
index = 1
}
adv = document.getElementById("adv")
adv.style.backgroundImage="url('image/mao"+index+".jpg')"
}
setInterval(roleImage,2000)
function image(index) {
adv.style.backgroundImage="url('image/mao"+index+".jpg')"
}
</script>
</head>
<body>
<div id="adv">
<ul>
<li onmouseover="image(1)">  </li>
<li onmouseover="image(2)">  </li>
<li onmouseover="image(3)">  </li>
</ul>
</div>
</body>
</html>
| 
转播
