js的自动轮播和手动轮播

自动和手动轮播显示3张图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js创建轮播</title>
    <style>
        *{
            margin:0;
            padding:0;
            list-style: none;
        }
       #box{
           border:3px solid red;
           position: relative;
           top:200px;
           margin:auto;
           overflow: hidden;
           height:300px;
           width:980px;
       }
        #left,#right{
            width:40px;
            height:40px;
            background-color: #ff4332;
            border-radius: 20px;
            text-align: center;
            line-height: 40px;
            color:white;
            cursor: pointer;
            position: absolute;
            top:130px;
        }
        #left{
            float:left;
            left:0;
        }
        #right{
            float:right;
            right:0;
        }
        .myLb{
            width:100%;
            z-index: -1;
            transition: all .5s linear;
        }
        #div1{
            background-color: #ffb9e0;
            position: absolute;
            left:0;
        }
        #div2{
            background-color: #ffa439;
            position: absolute;
            left:100%;
        }
        #div3{
            background-color: #2e69ff;
            position: absolute;
            left:100%;
        }
        #box img{
            height:100%;
        }
        @keyframes leftComeOn {
            from{left: -100%}to{left: 0}
        }
        @keyframes leftOut {
            from{left:0}to{left: 100%}
        }
        @keyframes rightOut {
            from{left: 0}to{left: -100%}
        }
        @keyframes rightComeOn {
            from{left: 100%}to{left: 0}
        }
        .xiaoyuandian{
            width: 400px;
            margin:200px auto 0;
        }
        .num{
            width: 50px;
            height: 50px;
            background-color: #ffdb1f;
            margin: 30px;
            border: 1px solid red;
            border-radius: 50px;
            font-size: 12px;
            text-align: center;
            line-height: 50px;
            cursor: pointer;
            float:left;
        }
    </style>
</head>
<body>
<!--html部分-->
//设置最外边的div：鼠标移入停止计时和鼠标移出计时开始
    <div id="box" onmouseout="beginInterval()" onmouseover="stopInterval()">
        <div class="myLb" id="div1">
            <img src="../images/1.jpg" alt="">
        </div>
        <div class="myLb" id="div2">
            <img src="../images/2.jpg" alt="">
        </div>
        <div class="myLb" id="div3">
            <img src="../images/3.jpg" alt="">
        </div>
//左右翻页按钮
        <div onclick="leftBtn()" id="left">←</div>  <!--上一页-->
        <div onclick="rightBtn()" id="right">→</div> <!--下一页-->
        <div class="xiaoyuandian">
            <div  class="num" onclick="go(0,'dian')">1号圆点</div>
            <div  class="num" onclick="go(1,'dian')">2号圆点</div>
            <div  class="num" onclick="go(2,'dian')">3号圆点</div>
        </div>
    </div>

<!--js部分-->
    <script>
        var dangqian=0;  //记录当前显示的图片号码数
        var myInterval;

        //页面载入开始计时
        window.onload = function(){
            beginInterval();
        }
        function beginInterval(){
            myInterval = setInterval(function(){
                rightBtn()
            },3000)
        }
        function stopInterval(){
            clearInterval(myInterval)
        }

        //点击数字按钮显示对应的图片
        function go(lai,dir){
            var myLb = document.getElementsByClassName('myLb');
            console.log("该走的是==="+dangqian+"====该来的是===="+lai)
            if (dir === 'pre') {
                //从右边来
                myLb[dangqian].style.animation = "rightOut .5s linear forwards";
                myLb[lai].style.animation = "rightComeOn .5s linear forwards"
            }else if(dir === 'next' || dir ==='dian'){
                //从左边来
                myLb[dangqian].style.animation = "leftOut .5s linear  forwards";
                myLb[lai].style.animation = "leftComeOn .5s linear forwards"
            }
            dangqian = lai;//让来的号码数等于当前显示的号码数
        }

        //点击左边的按钮显示下一页
        function leftBtn(){
            //按照顺序显示
            var lai;
            if (dangqian===0) {
                lai = 2;
                go(lai,'pre');
            }else{
                lai = dangqian -1;
                go(lai,'pre');
            }
        }

        //点击右边的按钮显示下一页
        function rightBtn(){
            //逆序显示
            var lai;
            if (dangqian===2) {
                lai = 0;
                go(lai,'next');
            }else{
                lai = dangqian +1;
                go(lai,'next');
            }
        }

    </script>
</body>
</html>
来源：CSDN
作者：beibei_niao
链接：https://blog.csdn.net/beibei_niao/article/details/103645810
标签
轮播