用setInterval实现自动轮播 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>原生实现多图切换效果</title>
    <style type="text/css">
        #box{
            width:600px;
            height:350px;
            background-color:#8b0000;
            margin:50px auto;
            position:relative;
        }
        img{
            width:600px;
            height:350px;
        }
        #prev,#next{    /*#prev和#next共有的样式*/
            font-size:26px;
            text-decoration:none;
            position:absolute;
            top:152px;
            display:none;
        }
        #box:hover #prev{
            display:block;
            background-color:rgba(192, 192, 192, 0.49);
            padding:8px 5px 8px 5px;
        }
        #box:hover #next{
            background-color: rgba(192, 192, 192, 0.49);
            display:block;
            padding:8px 5px 8px 5px;
        }
        #prev{
            left:20px;
        }
        #next{
            right:20px;
        }
        #span1,#text{   /*#span1和#text共有的样式*/
            font-size:20px;
            background-color: rgba(213, 213, 213, 0.43);
            width:100%;
            display:block;
            text-align:center;
            position:absolute;
            opacity:0.4;
        }
        #span1{
            top:20px;
        }
        #text{
            bottom:20px;
            margin:0;
        }
    </style>
</head>
<body>
<div id="box">
    <a href="javascript:;" id="prev"><</a>
    <a href="javascript:;" id="next">></a>
    <span id="span1"></span>
    <img src="" alt="#" id="img1">
    <p id="text"></p>
</div>
<script type="text/javascript">
    var oBox = document.getElementById("box");
    var oPrev = document.getElementById("prev");
    var oNext = document.getElementById("next");
    var oSpan = document.getElementById("span1");
    var oImg = document.getElementById("img1");
    var oText = document.getElementById("text");
    //设置一个数组，用来存放图片的路径
    var arrImg = ['../images/1.jpg','../images/2.jpg','../images/3.jpg','../images/4.jpg']
    //设置一个数组，用来存放每张图片对应的文字
    var arrText = ['人面不知何处去，桃花依旧笑春风。','繁枝容易纷纷落，嫩蕊商量细细开。','林花著雨燕支湿，水荇牵风翠带长。','恰似春风相欺得，夜来吹折数枝花。']
    var num =0;
    var timer = null;       //开一个定时器
    timer = setInterval(function(){
        num++;
        num%=arrText.length;
        tab();
    },2000)
    oBox.onmousemove = function(){
        clearInterval(timer);
    }
    oBox.onmouseout = function(){
        setInterval(timer = setInterval(function(){
            num++;
            num%=arrText.length;
            tab();
        },2000));
    }
    oSpan.innerHTML = num+1+'/'+arrImg.length;
    oImg.src = arrImg[num];
    oText.innerHTML = arrText[num];
    function tab(){
        oSpan.innerHTML = num+1+'/'+arrImg.length;
        oImg.src = arrImg[num];
        oText.innerHTML = arrText[num];
    }
        oNext.onclick = function(){
            num++;
            if(num >= 4){
                num = 0;
            }
            tab();
            oPrev.onclick = function(){
                num--;
                if(num < 0){
                    num = arrImg.length-1;
                }
                tab();
            }
    }



</script>
</body>
</html>

　　

posted on 2016-04-21 07:46  冬刻忆  阅读(921)  评论(0)    收藏  举报