js定时器实现图片轮播
效果展示如下：
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
