图片切换的表现形式有很多种类型，下面展示的是带缩略图的图片切换，可以根据缩略图选择想要展示的图片。
效果大概如下：
主要运用了自定义属性，this
循环为Li标签绑定鼠标移入、移出和点击事件。
<!DOCTYPE html>
<html>
<head>
<title>带缩略图的图片轮换</title>
<style type="text/css">
body{
background: url(bg.jpg) no-repeat;
}
#contain{
width: 500px;
height: 400px;
margin: 100px auto;
position: relative;
}
#pic{
width: 500px;
height: 370px;
border:2px solid white;
}
.icon-left,.icon-right{
position: absolute;
width: 30px;
height: 30px;
display: block;
font-size: 20px;
border-radius: 15px;
background: orange;
text-align: center;
font-weight: bold;
color: white;
top: 185px;
opacity: 0.5;
}
.icon-left:hover,.icon-right:hover{
opacity: 1;
}
.icon-left{
left: 20px;
}
.icon-right{
right: 20px;
}
#list{
list-style: none;
position: absolute;
top: 370px;
left: 200px;
width: 100px;
padding: 0;
margin: 12px 0 0 0;
}
#list li{
float: left;
width: 12px;
height: 12px;
border-radius: 6px;
background: #fff;
margin-left: 10px;
}
.sm-img{
width: 70px;
height: 50px;
position: absolute;
top: -68px;
left: -22px;
border:3px solid white;
display: none;
}
.box{
display: block;
width: 0;
border-bottom: 10px solid transparent;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid white;
position: absolute;
top: -12px;
left: 6px;
display: none;
}
</style>
</head>
<body>
<div id="contain">
<img src="9.jpeg" id="pic">
<span class="icon-left"><</span>
<span class="icon-right">></span>
<ul id="list">
<li></li>
<img class="sm-img">
<div class="box"></div>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script type="text/javascript">
var oImg=document.getElementById('pic');
var l_Btn=document.getElementsByClassName('icon-left');
var r_Btn=document.getElementsByClassName('icon-right');
var oUl=document.getElementById('list')[0];
var oLI=document.getElementsByTagName('li');
var oSmImg=document.getElementsByClassName('sm-img')[0];
var oBox=document.getElementsByClassName('box')[0];
var arrImg=['1.jpg','2.jpg','3.jpg','4.jpg'];
var num=0;
//按钮点击事件
l_Btn[0].onclick=function(){
if(num==0){
num=arrImg.length;
}
num--;
oImg.src=arrImg[num];
}
r_Btn[0].onclick=function(){
if(num==arrImg.length-1){
num=-1;
}
num++;
oImg.src=arrImg[num];
}
for(var i=0;i<oLI.length;i++){
oLI[i].index=i; //自定义属性
oLI[i].onmouseover=function(){
oLI[this.index].style.background='orange';
oSmImg.style.display='block';
oSmImg.style.left=-22+22*(this.index)+'px'; //改变缩略图的left，显示不同的图片，与Li的位置对应
oSmImg.src=arrImg[this.index];
oBox.style.display='block';
oBox.style.left=6+22*this.index+'px'; //改变箭头的left
}
oLI[i].onmouseout=function(){
oSmImg.style.display='none';
oBox.style.display='none';
oLI[this.index].style.background='white';
}
oLI[i].onclick=function(){
oImg.src=arrImg[this.index];
}
}
</script>
</body>
</html>