效果展示如下：
setInterval(moverleft,3000);定時器設置為3秒，而且實現圖片下方的小圓點序號跟圖片對應，點擊小圓點也能切換圖片。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>輪播的div+css樣式改進</title>
<style type="text/css">
body{background-image: url(img/001.jpg);}
.lb{
margin: 10px auto;
width: 1440px;
height: 420px;
}
#you{
cursor: pointer;
display: inline-block;
height: 420px;
width: 45px;
left: 1395px;
top: -424px;
position: relative;
z-index: 1;
}
#zuo{
cursor: pointer;
height: 420px;
width: 45px;
top: 424px;
position: relative;
z-index: 1;
}
.f{
opacity:0.2;//設置透明
}
.f:hover
{
opacity:1.0;//設置鼠標經過不透明
}
li{
list-style-type: square;
border: 1px #000;
width: 100px;
height: 100px;
}
.ul{
margin: auto;
display: inline-block;
position: relative; /*相對定位*/
z-index: 2;
left: 830px;
top: 380px;
}
#buttons span {
cursor: pointer;
font-size: 15px;
text-align: center;
font-family: "微軟雅黑";
float: left;
border: 1px solid #fff;
width: 20px;
height: 20px;
border-radius: 50%; /*設置為圓形*/
/*background: #333; */
margin-right: 15px; /*設置圓形的間隔為15像素*/
}
#buttons .on {
background: orangered; /*選中的按鈕樣式*/
}
</style>
</head>
<body>
<div class="lb">
<img src="img/左.png" id="zuo" class="f" />
<img src="img/1.jpg" id="img" />
<img src="img/右.png" id="you" class="f"/>
</div>
<div class="ul" id="buttons"><span index="1" class="on.45454" style="background: #FF4500;">1</span><span index="2" >2</span><span index="3">3</span><span index="4">4</span><span index="5">5</span><span index="6">6</span><span index="7">7</span></div>
<script type="text/javascript">
var zuo=document.getElementById("zuo");
var you=document.getElementById("you");
var img=document.getElementById("img");
var lb=document.getElementsByClassName("lb")[0];
var index=1;
var moverleft=function () {
index++;
if(index>7)index=1;
img.src="img/"+index+".jpg";
changbg ();
}
you.onclick=moverleft;
var moverright=function () {
index--;
if(index<1)index=7;
img.src="img/"+index+".jpg";
changbg ();
}
zuo.onclick=moverright;
var mm=setInterval(moverleft,3000);
lb.onmousemove=function () {
clearInterval(mm);
}
lb.onmouseout=function () {
mm=setInterval(moverleft,3000);
}
/* var buttons = document.getElementById("buttons").getElementsByTagName("span");
function showButton() {
//先找出原來有.on類的按鈕，並移除其類
for (var i = 0; i < buttons.length ; i++) {
if( buttons[i].className == 'on'){
buttons[i].className = '';
break;
}
}
//為當前按鈕添加類，索引下標從0開始，故需減1
buttons[index - 1].className = 'on';
}
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function () {
if (moverleft()) { //如果切換還在進行，則直接結束，直到切換完成
return;
}
if(this.className == 'on') { //如果點擊的按鈕是當前的按鈕，不切換，結束
return;
}
}
}
*/
var buttons = document.getElementById("buttons").childNodes;
function changbg () {
for(var i=0;i<buttons.length;i++)
{
buttons[i].style.background="#333333";
}
buttons[index-1].style.background="#FF4500";
}
//把下面小數字圖標和圖片連接起來,利用閉包的特點
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=(function () {
var j=i+1;
return function () {
index=j;
img.src="img/"+index+".jpg";
changbg();
}
})();
}
</script>
</body>
</html>
需要全部源碼地址：https://gitee.com/PengPeng8/LunBo.git