JS实现单击切换图片
前言
讲明一点，这是小编参照书上的代码写的，希望读者不要随意转载。
参考代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>项目1</title>
<style type="text/css">
ul{
margin: 0;
padding: 0;
}
li{
display: inline-block;
}
body{
background: #333;
}
#pic{
width: 300px;
height: 206px;
margin: 0 auto;
}
#pic img{
width: 300px;
height: 206px;
}
#pic ul{
margin-top: 10px;
text-align: center;
}
#pic .item,#pic .active{
/*设置圆点*/
width: 9px;
height: 9px;
cursor: pointer;
border-radius: 10px;
margin: 1px 1px 1px 8px;
}
#pic .item{
/*设置没有点击圆点时显示的背景*/
background: #FFF;
}
#pic .active{
/*设置点击圆点时显示的背景*/
background: #F60;
}
</style>
<script type="text/javascript">
window.onload=function () {
var div=document.getElementById('pic');
var img=div.getElementsByTagName('img')[0];
var ul=div.getElementsByTagName('ul')[0];
var imgUrl=['imgs/p1.jpg','imgs/p2.jpg','imgs/p3.jpg','imgs/p4.jpg'];
var li=div.getElementsByTagName('li');
for(var i=0;i<imgUrl.length;i++){
ul.innerHTML+="<li class='item'></li>";
}
img.src=imgUrl[0];
li[0].className='item active';
for (var j=0;j<li.length;j++){
li[j].index=j;
li[j].onclick=function () {
img.src=imgUrl[this.index];
for(var i=0;i<li.length;i++){
li[i].className='item';
}
this.className='item active';
}
}
}
</script>
</head>
<body>
<div id="pic">
<img src="" alt="">
<ul></ul>
</div>
</body>
</html>
运行效果如下:
