<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div{
width: 360px;
border: 1px black solid;
margin: 0 auto;
border-radius: 8px;
/* 父容器加相对定位 */
position: relative;
}
img{
border-radius: 8px;
}
li{
float: left;
list-style: none;
width: 26px;
height: 26px;
border: 1px black solid;
/* 左右居中 */
text-align: center;
/* 行高为li的高度,这样文字就可以垂直居中了 */
line-height: 26px;
margin-left: 15px;
background-color: #FFFFFF;
/* 变成手的光标 */
cursor: pointer;
}
ul{
/* 在父容器进行绝对定位 */
position: absolute;
top: 140px;
left: 30px;
}
</style>
</head>
<body>
<div>
<img src="images/1.gif" >
<ul>
<li onclick="clicks(0)">1</li>
<li onclick="clicks(1)">2</li>
<li onclick="clicks(2)">3</li>
<li onclick="clicks(3)">4</li>
<li onclick="clicks(4)">5</li>
</ul>
</div>
<script type="text/javascript">
// 图片名称
var imgs=["1.gif","2.gif","3.jpg","4.jpg","5.gif"]
// 更换图片
function clicks(n){
//设置图片src的值
document.getElementsByTagName("img")[0].setAttribute("src","images/"+imgs[n])
}
//刚开始默认值为0,即数组下标为0元素
var i=0;
function js(){
// if (i<4) {
// i++;
// } else{
// i=0;
// }
// alert(i)
i= i<4 ? i+=1 : i=0;//三元运算符,当下标小于4的时每次加一,否则重新回到0
clicks(i); //调用函数
}
setInterval("js()",3000)//每三秒执行一次js()函数
</script> </body> </html>