轮播思路及完整可运行代码

  　　用过很多轮播插件，很少自己写一个，所以今天在这里说一下我写轮播的思路和具体实现过程。

 　　  轮播的主体就是让图片轮流变换，切换图片的方式。

　　

 

我们只需要固定要显示的区域然后让要显示的东西移动，给盒子设置overflew：hidden，相当于经过窗口的元素显示其余的隐藏，就可以实现单方向切图效果。

css部分：

    
    <style>
        
        #box{
            width:300px;
            height: 200px;
            position: relative;
            margin: 0 auto;
            
        
        }
        #sliderbox{
            width: 2000px;
            height: 200px;
            position: relative;
            right: 0;
            
        }
        
        #sliderbox img{
            width: 300px;
            height: 200px;
            position: relative;
            float: left;
            
            }
        #bt{
            width: 100%;
            height:30px;
            position: absolute;
            bottom:0px;
            text-align: center;
        }
        
        #bt span{
            margin: 0 30px;
            color: red;
        }
        
        #doublebt{
            width: 100%;
            height: 50px;
            position: absolute;
            top: 80px;
        }
        #prev{
            width: 30px;
            height: 30px;
            float: left;
        }
        #next{
            width: 30px;
            height: 30px;
            float: right;
        }
        .border{
            border: 1px solid red;
        }
    </style>

html部分：

        <!--显示盒子-->
        <div id="box">
            
        <!--轮播图-->    
        <div id="sliderbox">
            <img src="http://www.pptbz.com/pptpic/UploadFiles_6909/201203/2012031220134655.jpg"/>
            <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3240052967,3443336204&fm=27&gp=0.jpg"/>
            <img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=873265023,1618187578&fm=27&gp=0.jpg"/> 
        </div>
        <!--按键-->
        <div id="bt">
       <span id="">1</span>
       <span id="">2</span>
       <span id="">3</span>
        </div>    
        <!--左右控制-->
        <div id="doublebt">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1131338284,2493177628&fm=26&gp=0.jpg" id="prev"/>
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2358841409,1917272712&fm=26&gp=0.jpg" id="next"/>
        </div>
        
        </div>

js 实现简单轮播，每一次移动一个图片的宽度的单位，当然显示的盒子最好也是图片的宽度，轮播到最后一张时返回第一张，反之亦然，可以设置一个计数器，判断轮播的位置 ，移动的距离（计数器*一张图片的宽度）下面是具体js代码：

<script type="text/javascript">
    var silder = document.getElementById("sliderbox")
    var time = setInterval("move()", 2000)
    var sw = 0; //计数
    var img = document.getElementById("box"); //盒子显示图片的范围
    var btspan = document.getElementById("bt").getElementsByTagName("span");
    //控制轮播    
    function move() {
        sw++;
        if(sw > 2) {
            sw = 0
            silder.style.right = 300 * sw + "px";
            addBorder(sw);
        }
        silder.style.right = 300 * sw + "px";
        console.log(btspan[sw]);
        addBorder(sw);
    }
    //鼠标悬停                 
    img.onmouseover = function() {
        console.log(1);
        clearInterval(time);
    }
    img.onmouseout = function() {
        console.log(2);
        time = setInterval("move()", 2000);
    }
    //浮点控制轮播            
    for(let i = 0; i < btspan.length; i++) {
        //span元素被点击跳转到对应图片    
        btspan[i].onclick = function() {
            silder.style.right = 300 * i + "px";
            $(this).addClass("border").siblings().removeClass("border")
        }
    }
    //左右按键控制轮播
    //上一个
    var prev = document.getElementById("prev")
    prev.onclick = function() {
        this.style.opacity = "0.7";
        sw--;
        if(sw < 0) {
            sw = 2;
            silder.style.right = 300 * sw + "px";
            addBorder(sw);
        }
        silder.style.right = 300 * sw + "px";
        addBorder(sw);
    }
    //下一个      
    var next = document.getElementById("next")
    next.onclick = function() {
        this.style.opacity = "0.7";
        sw++;
        if(sw > 2) {
            sw = 0;
            silder.style.right = 300 * sw + "px";
            addBorder(sw);
        }
        silder.style.right = 300 * sw + "px";
        addBorder(sw);
    }

    //添加border 样式
    function addBorder(sw) {
        $("span").eq(sw).addClass("border").siblings().removeClass("border")
    }
</script>
        

 

好了，轮播到这里就实现了。