效果如下：直接截了張圖片，效果去天貓看，圖片自己去天貓官網扣
html代碼：
<body>
<div class="box">
<div class="box-1">
<ul>
<li>
<a href="#"><img src="images/banner1.png"></img></a>
<h2><a href="#"><img src="./images/banner1t.png" alt=""></a></h2>
<h3><a href="#"><img src="./images/banner1b.png" alt=""></a></h3>
</li>
<li>
<a href="#"><img src="images/banner2.png"></img></a>
</li>
<li>
<a href="#"><img src="images/banner3.png"></img></a>
<h2><a href="#"><img src="./images/banner3t.png" alt=""></a></h2>
<h3><a href="#"><img src="./images/banner3b.png" alt=""></a></h3>
</li>
<li>
<a href="#"><img src="images/banner4.png"></img></a>
</li>
<li>
<a href="#"><img src="images/banner5.png"></img></a>
<h2><a href="#"><img src="./images/banner5t.png" alt=""></a></h2>
<h3><a href="#"><img src="./images/banner5b.png" alt=""></a></h3>
</li>
<li>
<a href="#"><img src="images/banner6.png"></img></a>
<h2><a href="#"><img src="./images/banner6t.png" alt=""></a></h2>
<h3><a href="#"><img src="./images/banner6b.png" alt=""></a></h3>
</li>
</ul>
</div>
<div class="box-2">
<ul>
</ul>
</div>
<div class="box-3">
<span class="prev"></span>
<span class="next"></span>
</div>
</div>
</body>
css樣式：
<style>
* {
padding: 0;
margin: 0;
font-family: "微軟雅黑";
font-size: 14px;}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: black;
}
.box{
width: 1230px;
height: 500px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.box-1 ul{
width: 2500px;
height: 500px;
}
.box-1 ul li{
width: 1230px;
height: 500px;
position: relative;
overflow: hidden;
}
.box-1 ul li img{
display:block;
width: 100%;
height: 100%;
}
.box-1 ul li h2{
position: absolute;
top: 20px;
right: 0px;
width: 200px;
height: 210px;
background: rgba(255,255,255,.6);
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
}
.box-1 ul li h2 img{
width: 100%;
height: 100%;
}
.box-1 ul li h2:hover{
background: white;
}
.box-1 ul li h3{
position: absolute;
bottom: 20px;
right: 0px;
width: 200px;
height: 210px;
background: rgba(255,255,255,0.6);
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
font-weight: normal;
}
.box-1 ul li h3 img{
width: 100%;
height: 100%;
}
.box-1 ul li h3:hover{
background: white;
}
.box-2{
position: absolute;
left: 525px;
bottom: 25px;
}
.box-2 ul li{
float:left;
width: 20px;
height: 5px;
overflow: hidden;
margin: 0 5px;
background: rgba(0,0,0,0.5);
text-indent: 100px;
cursor: pointer;
}
.box-2 ul .on{
background: white;
}
</style>
js代碼：
<script type="text/javascript"> window.onload = function(){ function $(param){ if(arguments[1] == true){ return document.querySelectorAll(param); }else{ return document.querySelector(param); } } var $box = $(".box"); var $box1 = $(".box-1 ul li",true); var $box2 = $(".box-2 ul"); var $box3 = $(".box-3"); var $length = $box1.length; var str = ""; for(var i =0;i<$length;i++){ if(i==0){ str +="<li class='on'>"+(i+1)+"</li>"; }else{ str += "<li>"+(i+1)+"</li>"; } } $box2.innerHTML = str; var current = 0; var timer; timer = setInterval(go,3000); function go(){ for(var j =0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } if($length == current){ current = 0; } $box1[current].style.display = "block"; $box2.children[current].className = "on"; current++; } for(var k=0;k<$length;k++){ $box1[k].onmouseover = function(){ clearInterval(timer); } $box1[k].onmouseout = function(){ timer = setInterval(go,3000); } } for(var p=0;p<$box3.children.length;p++){ $box3.children[p].onmouseover = function(){ clearInterval(timer); }; $box3.children[p].onmouseout = function(){ timer = setInterval(go,3000); } } for(var u =0;u<$length;u++){ $box2.children[u].index = u; $box2.children[u].onmouseover = function(){ clearInterval(timer); for(var j=0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } this.className = "on"; $box1[this.index].style.display = "block"; current = this.index +1; } $box2.children[u].onmouseout = function(){ timer = setInterval(go,3000); } } $box3.children[0].onclick = function(){ back(); } $box3.children[1].onclick = function(){ go(); } function back(){ for(var j =0;j<$length;j++){ $box1[j].style.display = "none"; $box2.children[j].className = ""; } if(current == 0){ current = $length; } $box1[current-1].style.display = "block"; $box2.children[current-1].className = "on"; current--; } } </script>