HTML
<div class="box">
<img src=""/>
<a href="javascript:;"><</a>
<a href="javascript:;">></a>
<ul>
</ul>
</div>
CSS
*{
margin: 0;
padding: 0;
}
.box{
width: 400px;
height: 500px;
position: relative;
margin: 20px auto 0;
}
img{
width: 100%;
height: 200px;
}
a{
position: absolute;
top:70px;
width: 40px;
height: 40px;
text-decoration: none;
background: #000;
opacity: .4;
color: #fff;
text-align: center;
line-height: 40px;
border-radius: 50%;
font-size: 26px;
font-weight: bold;
}
a:nth-of-type(2){
right: 0;
}
a:hover{
opacity: 0.8;
}
ul{
text-align: center;
}
li{
list-style: none;
display: inline-block;
width: 50px;
height: 10px;
background: #ccc;
margin: 0 5px;
position: relative;
}
li span{
width: 80px;
height: 50px;
position: absolute;
left: 50%;
margin-left: -40px;
top: -60px;
border: 2px solid #5C5C5C;
display: none;
}
li span:after{
position: absolute;
width: 0;
height: 0;
content: "";
border-top: 10px solid #5C5C5C;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
left: 50%;
margin-left: -5px;
bottom: -10px;
}
li span img{
width: 100%;
height: 100%;
}
li:hover{
background: #5C5C5C;
}
li.act{
background: orangered;
}
JS
var imgArry=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510739103582&di=0939369c1f3121bd67302a3b1c9f6f75&imgtype=0&src=http%3A%2F%2Fwww.czxnews.com%2Fczxnews%2Fd%2Ffile%2Fsheying%2Fyishusheying%2F2013-12-23%2Fe15396e02562a0bb6bde8e9984e5a9ad.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511335272&di=b124fecf6508ca88fcf57dd515290a67&imgtype=jpg&er=1&src=http%3A%2F%2Fimage13-c.poco.cn%2Fmypoco%2Fmyphoto%2F20121003%2F08%2F6428479620121003083711096.jpg%3F850x566_120",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740570491&di=5864fb7421f48cf482ac36ff8dc20843&imgtype=0&src=http%3A%2F%2Fimage142-c.poco.cn%2Fmypoco%2Fmyphoto%2F20130704%2F15%2F6424550520130704151232085.jpg%3F1024x768_120",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740617529&di=551b393c9a11164bb971a09741ae399e&imgtype=0&src=http%3A%2F%2Fuploads.xuexila.com%2Fallimg%2F1704%2F1047-1F42GHK2.jpg",
"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1510740642624&di=f12767f2a0c7c722117ece5feaa14a1a&imgtype=0&src=http%3A%2F%2Fimage16-c.poco.cn%2Fmypoco%2Fmyphoto%2F20140706%2F19%2F174239703201407061931272517175060562_004.jpg%3F1280x867_120"
];
var aBtn=document.getElementsByTagName("a");
var oImg=document.getElementsByTagName("img")[0];
var oUl=document.getElementsByTagName("ul")[0];
var aLi=oUl.getElementsByTagName("li");
var aSpan=oUl.getElementsByTagName("span");
var num=0;
//页面初始化
oImg.src=imgArry[0];
for (var i=0;i<imgArry.length;i++) {
oUl.innerHTML+="<li><span><img src='"+imgArry[i]+"'/></span></li>";
}
aLi[0].className="act";
for (var i=0;i<aBtn.length;i++) {
aBtn[i].index=i;
aBtn[i].οnclick=function(){
if(this.index==1){
//点击下一张切换图片
num++;
if(num>=imgArry.length){
num=imgArry.length-1;
}
}else{
//点击上一张切换图片
num--;
if(num<0){
num=0;
}
}
num%=imgArry.length;
fn(num);
}
}
for (var i=0;i<aLi.length;i++) {
aLi[i].index=i;
//鼠标移入显示小图标
aLi[i].οnmοuseοver=function(){
for (var i=0;i<aLi.length;i++) {
aSpan[i].style.display="none";
}
aSpan[this.index].style.display="block";
}
//鼠标移出小图标隐藏
aLi[i].οnmοuseοut=function(){
aSpan[this.index].style.display="none";
}
//鼠标点击切换图片
aLi[i].οnclick=function(){
num=this.index;
fn(this.index);
}
}
//函数封装
function fn(num1){
for (var i=0;i<aLi.length;i++) {
aLi[i].className="";
}
aLi[num1].className="act";
oImg.src=imgArry[num1];
}