上一张图和下一张图所示效果的轮播图切换该咋做-唐朝资源网

接下来，我给大家展示一个旋转木马，效果如下图所示。鼠标滑过1234时，可以分别显示对应的图片（类似于标签页，请看我的另一篇文章03-8选项卡），点击左下角箭头切换上一张图和下一张图，当播放完最后一张图片，点击下一张图片显示第一张图片，点击第一张图片时显示最后一张图片。进入页面后会自动播放。鼠标滑入时停止播放，滑出时自动再次播放。让我们现在开始吧！

图片[1]-上一张图和下一张图所示效果的轮播图切换该咋做-唐朝资源网

1234的就不提了一组图片下面是1234,点哪个滚到哪张,怎么做的，和标签一样一组图片下面是1234,点哪个滚到哪张,怎么做的，选择一个按钮，对应的图片就变了

图片[2]-上一张图和下一张图所示效果的轮播图切换该咋做-唐朝资源网

这样，1234切换就完成了，那么左边的上一张图和下一张图怎么切换呢？我如何知道当前显示的是哪个图像？只知道当前图片的索引，加1。我知道下一张图片中没有优化的轮播图的代码如下（重复的代码没有封装成函数）


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style:none;
        }
        .container{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        #img-box {
            width: 500px;
            height: 400px;
          overflow : hidden;
        }
      #img-box img{
            display:none;
      }
        #img-box .selected{
            display:block;
        }
        #tab{
            position: absolute;
            right:10px;
            bottom:10px;
        }
        #tab li{
            width: 20px;
            height: 20px;
            background:#000;
            color:#fff;
            text-align:center;
            line-height:20px;
            float:left;
            margin-right:2px;
            cursor : pointer;
        }
        #tab li.selected{
            background:orange;
        }
        .btn{
            position:absolute;
            left:10px;
            bottom:10px;
            background:#000;
            color:#fff;
            cursor: pointer;
        }
        .btn .selected{
            background:orange;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="img-box">
            <img src="img/1.png" alt="">
            <img class="selected" src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
        <ul  id="tab">
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn">
            <span id="prev-btn"> <</span>
            <span id="next-btn"> ></span>
        </div>
    </div>
    <script>
        var oTab = document.getElementById("tab");
        var aLi = oTab.getElementsByTagName("li");
        var oImgBox = document.getElementById("img-box");
        var  aImg = oImgBox.getElementsByTagName("img");
        var oPrev = document.getElementById("prev-btn");
        var oNext = document.getElementById("next-btn");
        // var nowIndex;//保存当前选中的下标，这样写会报错，只定义，未赋值，下面得鼠标划入才会获取当前索引
        var nowIndex = 0;
        //1234切换图片
        for(var i =0;i<aLi.length;i++){
            aLi[i].index = i ;
            aLi[i].onmouseover = function(){
                nowIndex = this.index;//获取当前下标值
                for(var j =0;j<aLi.length;j++){
                    aLi[j].className = "";
                    aImg[j].className = "";
                }
                this.className = "selected";
                aImg[this.index].className = "selected";
            }
        }
        //上一张下一张切换
        oPrev.onclick = oNext.onclick = function(){
            if(this==oPrev){
                nowIndex--;
                if(nowIndex == -1){
                    nowIndex = aLi.length - 1;
                }
            }else{
                nowIndex++;
                //判断值是否越界，数组下标为0123，所以，如果当前下标为数组长度4，那就拉回到0
                if(nowIndex==aLi.length){
                    nowIndex = 0;
                }
            }
            for(var j =0;j<aLi.length;j++){
                aLi[j].className = "";
                aImg[j].className = "";
            }
            aLi[nowIndex].className = "selected";
            aImg[nowIndex].className = "selected";
        }
    </script>
</body>
</html>

让我们把重复的代码封装成一个函数


    <script>
        var oTab = document.getElementById("tab");
        var aLi = oTab.getElementsByTagName("li");
        var oImgBox = document.getElementById("img-box");
        var  aImg = oImgBox.getElementsByTagName("img");
        var oPrev = document.getElementById("prev-btn");
        var oNext = document.getElementById("next-btn");
        var nowIndex = 0;
        for(var i =0;i<aLi.length;i++){
            aLi[i].index = i ;
            aLi[i].onmouseover = function(){
                nowIndex = this.index;//获取当前下标值
               changeImg();
            }
        }
        oPrev.onclick = oNext.onclick = function(){
            if(this==oPrev){
                nowIndex--;
                if(nowIndex == -1){
                    nowIndex = aLi.length - 1;
                }
            }else{
                nowIndex++;
                if(nowIndex==aLi.length){
                    nowIndex = 0;
                }
            }
            changeImg();
        }
        function changeImg(){
            for(var j =0;j<aLi.length;j++){
                aLi[j].className = "";
                aImg[j].className = "";
            }
            aLi[nowIndex].className = "selected";
            aImg[nowIndex].className = "selected";
        }
    </script>
</body>
</html>

现在添加代码来控制他的自动播放

   //自动播放
        setInterval(function(){
            oNext.onclick();
        },1000)

如何让他滑入时暂停，离开时自动播放？先定义一个定时器让它自动播放，鼠标滑出时调用定时器，鼠标滑入时清空定时器

图片[3]-上一张图和下一张图所示效果的轮播图切换该咋做-唐朝资源网

上面的代码会导致定时器混淆，因为onmouseout里面调用的和外面onmouseover清零的不是定时器，所以会混淆，去掉var，加上var重新定义一个定时器Timer ，去掉var就是老定时器，如下图，这样就可以了

图片[4]-上一张图和下一张图所示效果的轮播图切换该咋做-唐朝资源网

再次优化计时器

   oContainer.onmouseover = function(){
            clearInterval(timer);
        };
        oContainer.onmouseout = function(){
            play();
        };
        play();//一定要先调用，这样当页面一加载的时候就能播放了
        function play(){
             timer = setInterval(function(){//不能有var，否则在别处调用时，又会重新定义timer了
                oNext.onclick();
            },1000)
        }

上面的代码将定义定时器封装成一个函数，但是需要注意的是不能在函数中使用var来定义定时器，否则后面调用的时候会重新定义很多定时器，这会导致混乱。至此，大功告成，完整代码如下


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style:none;
        }
        .container{
            width: 500px;
            height: 400px;
            margin: 0 auto;
            position: relative;
        }
        #img-box {
            width: 500px;
            height: 400px;
          overflow : hidden;
        }
      #img-box img{
            display:none;
      }
        #img-box .selected{
            display:block;
        }
        #tab{
            position: absolute;
            right:10px;
            bottom:10px;
        }
        #tab li{
            width: 20px;
            height: 20px;
            background:#000;
            color:#fff;
            text-align:center;
            line-height:20px;
            float:left;
            margin-right:2px;
            cursor : pointer;
        }
        #tab li.selected{
            background:orange;
        }
        .btn{
            position:absolute;
            left:10px;
            bottom:10px;
            background:#000;
            color:#fff;
            cursor: pointer;
        }
        .btn .selected{
            background:orange;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="img-box">
            <img src="img/1.png" alt="">
            <img class="selected" src="img/2.png" alt="">
            <img src="img/3.png" alt="">
            <img src="img/4.png" alt="">
        </div>
        <ul  id="tab">
            <li class="selected">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div class="btn">
            <span id="prev-btn"> <</span>
            <span id="next-btn"> ></span>
        </div>
    </div>
    <script>
        var oTab = document.getElementById("tab");
        var aLi = oTab.getElementsByTagName("li");
        var oImgBox = document.getElementById("img-box");
        var  aImg = oImgBox.getElementsByTagName("img");
        var oPrev = document.getElementById("prev-btn");
        var oNext = document.getElementById("next-btn");
        var oContainer = document.getElementById("container");
        var timer;//因为在下面的play函数里不能定义定时器，只能在外面定义了
        var nowIndex = 0;
        for(var i =0;i<aLi.length;i++){
            aLi[i].index = i ;
            aLi[i].onmouseover = function(){
                nowIndex = this.index;//获取当前下标值
               changeImg();
            }
        }
        oPrev.onclick = oNext.onclick = function(){
            if(this==oPrev){
                nowIndex--;
                if(nowIndex == -1){
                    nowIndex = aLi.length - 1;
                }
            }else{
                nowIndex++;
                if(nowIndex==aLi.length){
                    nowIndex = 0;
                }
            }
            changeImg();
        }
        oContainer.onmouseover = function(){
            clearInterval(timer);
        };
        oContainer.onmouseout = function(){
            play();
        };
        play();
        function play(){
             timer = setInterval(function(){
                oNext.onclick();
            },1000)
        }
        function changeImg(){
            for(var j =0;j<aLi.length;j++){
                aLi[j].className = "";
                aImg[j].className = "";
            }
            aLi[nowIndex].className = "selected";
            aImg[nowIndex].className = "selected";
        }
    </script>
</body>
</html>

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END