js 图片自动循环切换setInterval();

stlye样式定义

<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>

 

//body中定义两个DIV标签,一个放置切换图片，一个放图片对应的数字span

<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中写的方法

//取出要用到的ID或类名或

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 buttons = document.getElementById("buttons").childNodes;//获得DIV buttons中下级元素

//定义左移动图片的函数

var moverleft=function  () {
                index++;
                if(index>7)index=1;
                img.src="img/"+index+".jpg";
                changbg ();//changbg()是之后用来改变span中的的背景颜色
            }

//定义右移动图片的函数

var moverright=function () {
                index--;
                if(index<1)index=7;
                img.src="img/"+index+".jpg";
                changbg ();
            }

//让左右点击图片能切换，把上面左右移动函数分别付给左右点击图片

you.onclick=moverleft;

zuo.onclick=moverright;

定义计时器3秒钟自动切换图片

var mm=setInterval(moverleft,3000);

//定义鼠标移动到图片上就暂停自动切换图片，就是把计时器清空用clearInterval();函数

lb.onmousemove=function () {
                clearInterval(mm);
            }

//定义鼠标移开图片后又能自动切换图片

lb.onmouseout=function () {
              mm=setInterval(moverleft,3000);
            }
            

//定义改变span背景颜色函数changbg()

function changbg () {
                
                for(var i=0;i<buttons.length;i++)
                {
                    buttons[i].style.background="#333333";
                }
                buttons[index-1].style.background="#FF4500";
            }

//把span图标和图片连接起来,利用闭包的特点
            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();
                }
                })();    
            }

以上结束