1、HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<link rel="stylesheet" href="css/banner.css">
</head>
<body>
<div class="banner">
<div class="img">
<img class="op1" src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
<img src="images/7.jpg">
<img src="images/8.jpg">
</div>
<ul class="list">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="left"><</a>
<a href="javascript:;" class="right">></a>
<span class="title">1/8</span>
</div>
<script type="text/javascript" src="js/banner.js"></script>
</body>
</html>2、CSS部分
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.banner{
width:500px;
height:300px;
margin:50px auto;
border:1px solid pink;
position: relative;
}
.banner img{
display: block;
width:500px;
height:300px;
position:absolute;
top:0;
left:0;
opacity: 0;
}
.banner img.op1{
opacity: 1;
}
.banner .list{
width:120px;
position: absolute;
bottom:10px;
right:5px;
}
.banner .list li{
float:left;
width:10px;
height:10px;
margin-right:5px;
border-radius: 50%;
cursor: pointer;
background: pink;
}
.banner .list li.active{
background:orange;
}
.banner a{
text-decoration: none;
font-size: 100px;
color:#fff;
position: absolute;
top:100px;
}
.banner .left{
left:10px;
}
.banner .right{
right:10px;
}
.banner .title{
width:100px;
height:30px;
font:700 18px/30px "";
color:#fff;
text-align: center;
position: absolute;
top:0;
left:200px;
}3、JS部分
(function(){
var oBanner=document.getElementsByClassName('banner')[0];
var aImg=document.getElementsByTagName('img');
var aLi=document.getElementsByTagName('li');
var oRight=document.getElementsByClassName('right')[0];
var oLeft=document.getElementsByClassName('left')[0];
var oTitle=document.getElementsByClassName('title')[0];
var img=document.getElementsByClassName("img")[0];
var num=0;
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
num=this.index;
tab();
}
}
function tab(){
for(var i=0;i<aLi.length;i++){
aLi[i].className="";
aImg[i].className="";
}
aLi[num].className="active";
aImg[num].className="op1";
oTitle.innerHTML=(num+1)+"/8";
}
oRight.onclick=function(){
if(num==aLi.length-1){
num=0;
}else{
num++;
}
tab();
}
oLeft.onclick=function(){
if(num==0){
num=aLi.length-1;
}else{
num--;
}
tab();
}
var timer=setInterval(function(){
oRight.onclick()
},2000);
oBanner.onmouseover=function(){
clearInterval(timer);
}
oBanner.onmouseout=function(){
timer=setInterval(function(){
oRight.onclick()
},2000);
}
})()4、效果图
这里，也可以根据图片的张数来动态添加圆点个数：
for(var i=0;i<aImg.length;i++){
$(".list").append('<li></li>');
｝也可以給左右按钮添加样式，效果如下图：
<div class="btn">
<span class="left"><</span>
<span class="right">></span>
</div>.btn span{width:50px;height:100px;display:block;color:#fff;background:rgba(0,0,0,0.6);cursor:pointer;text-align: center;font-size: 40px;line-height: 100px;}
.btn .left{position:absolute;top:50%;margin-top: -50px;left:0;}
.btn .right{position:absolute;top:50%;margin-top: -50px;right:0;}