之前做了一个轮播图练习，偶然之间看到一个带有缩略图的图片切换方式，自己练习了一下，效果图如下：
css部分：
* {
padding: 0;
margin: 0
}
li {
list-style: none;
}
body {
background: #303030
}
#box {
width: 1000px;
margin: 100px auto;
background: #f1f1f1;
padding: 50px 50px;
position: relative;
}
#box-in {
width: 800px;
height: 500px;
margin: 0 auto;
background: #fff;
box-shadow: black 0 0 10px
}
#box-in img {
width: 100%;
height: 100%
}
#arrows {
width: 100%;
height: 50px;
position: absolute;
top: 50%;
margin-top: -25px;
left: 0;
}
#arrows #prev {
position: absolute;
left: 50px
}
#arrows a {
display: inline-block;
width: 60px;
height: 60px;
background: #303030;
border-radius: 50%;
text-align: center;
opacity: .3
}
#arrows a:hover {
opacity: .6
}
#arrows a img {
margin-top: 4px
}
#arrows #prev img {
transform: rotate(-180deg);
}
#arrows #next {
position: absolute;
right: 50px;
}
#slider {
text-align: center;
margin-top: 40px
}
#slider ul li {
width: 20px;
height: 20px;
border-radius: 50%;
background: #808080;
display: inline-block;
margin: 0 10px;
position: relative;
cursor: pointer;
}
#slider ul li div {
width: 200px;
height: 120px;
background: red;
position: absolute;
left: 0;
bottom: 30px;
margin: 0 10px
}
#slider ul li div img {
width: 100%;
height: 100%;
}
#slider ul li.active {
background: #550101
}
html部分：
<div id="box">
<div id="box-in">
<img src="img/c361272bf7bf2d9d8c896c1e724833c030ae5ccf1bbb6d-zz9Zcu_fw658_03.gif">
</div>
<div id="arrows">
<a href="javascript:;" id="prev"><img src="img/cae7b801-0fe6-4691-ba99-239ba9d11576.png"></a>
<a href="javascript:;" id="next"><img src="img/cae7b801-0fe6-4691-ba99-239ba9d11576.png"></a>
</div>
<div id="slider">
<ul>
</ul>
</div>
</div>
js部分：
//获取dom元素
var oPic = document.getElementById("box-in").getElementsByTagName("img")[0];
var next = document.getElementById("next");
var prev = document.getElementById("prev");
var num = 0;
var slider = document.getElementById("slider");
var oUl = slider.getElementsByTagName("ul")[0];
var aSlider = slider.getElementsByTagName("li");
//这里替换你的图片
var aPic = ['img/c361272bf7bf2d9d8c896c1e724833c030ae5ccf1bbb6d-zz9Zcu_fw658_03.gif','img/c361272bf7bf2d9d8c896c1e724833c030ae5ccf1bbb6d-zz9Zcu_fw658_06.gif','img/c361272bf7bf2d9d8c896c1e724833c030ae5ccf1bbb6d-zz9Zcu_fw658_09.gif','img/c361272bf7bf2d9d8c896c1e724833c030ae5ccf1bbb6d-zz9Zcu_fw658_12.png'];
for(var i = 0; i<aPic.length; i++) {
oUl.innerHTML += "<li>"+
"<div style='display: none;'><img src='' / id='small'></div>"+
"<a href='javascript:;'></a>"
+"</li>";
}
for(var i = 0; i<aSlider.length; i++) {
aSlider[i].index = i;
//console.log(aSlider[i].index);
}
aSlider[0].className = "active"; //小圆点初始化
//设置小圆点激活状态
function addActive(item) {
for(var i = 0; i<item.length; i++) {
item[i].className = "";
}
if(num == item[num].index) {
item[num].className = "active";
}
}
//切换下一个
function nextFun(item, pic) {
num++;
if(num<pic.length) {
item.src = pic[num];
}else if(num == pic.length) {
//aSlider[num].index = 0;
num = 0;
item.src = pic[num];
}
addActive(aSlider);
}
//切换上一个
function prevFun(item, pic) {
num--;
if(num>-1) {
item.src = pic[num];
}else if(num == -1) {
num = pic.length-1;
item.src = pic[num];
}
addActive(aSlider);
}
next.onclick = function() {
console.log("next onclick");
nextFun(oPic,aPic);
}
prev.onclick = function() {
console.log("prev onclick");
prevFun(oPic,aPic);
}
for(var i = 0; i<aSlider.length; i++) {
//小圆点添加鼠标移入事件
aSlider[i].onmouseover = function() {
//alert(this.index);
var pic = this.getElementsByTagName("img")[0];
var div = this.getElementsByTagName("div")[0];
pic.src = aPic[this.index];
div.style.display = "block";
}
//小圆点添加鼠标移出事件
aSlider[i].onmouseout = function() {
var pic = this.getElementsByTagName("img")[0];
var div = this.getElementsByTagName("div")[0];
div.style.display = "none";
}
//小圆点添加点击事件
aSlider[i].onclick = function() {
num = this.index;
for(var i = 0; i<aSlider.length; i++) {
aSlider[i].className = "";
}
oPic.src = aPic[this.index];
this.className = "active";
}
}