顺序循环切换图片

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box {
            width: 500px;
            height: 400px;
            margin: 50px auto;
            text-align: center;
        }

        #banner {
            width: 500px;
            height: 375px;
            position: relative;
        }

        #banner img {
            width: 100%;
            height: 100%;
        }

        p {
            position: absolute;
            left: 0;
            height: 30px;
            line-height: 30px;
            background: rgba(0, 0, 0, 0.513);
            color: #fff;
            font-weight: bold;
            width: 100%;
        }

        p:nth-child(1) {
            top: 0px;
        }

        p:last-child {
            bottom: 0px;
        }

        #banner button {
            position: absolute;
            width: 50px;
            height: 40px;
        }

        #left {
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

        #right {
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .active{
            background:orange;
            color:#fff;
        }
    </style>
</head>

<body>
    <div id="box">
        <button class="active">顺序</button>
        <button>循环</button>
        <div id="banner">
            <p>1/4</p>
            <button id="left">左</button>
            <button id="right">右</button>
            <img src="images/onepiece.jpg" alt="">
            <p>合影</p>
        </div>
    </div>

    <script>
        var btn = document.getElementsByTagName('button');
        var ps = document.getElementsByTagName('p');
        var img = document.getElementsByTagName('img')[0];
        var arr = ['images/onepiece.jpg', 'images/onepiece2.jpg', 'images/onepiece3.jpg', 'images/onepiece4.jpg'];
        var arr_title = ['合照','乔巴','路飞','索隆'];

        var flag = true;   //   true-顺序【默认】   false-循环
        var num = 0;
        // 顺序按钮
        btn[0].onclick = function(){
            flag = true;
            this.className = 'active';
            btn[1].className = '';
        }
        // 循环按钮
        btn[1].onclick = function(){
            flag = false;
            this.className = 'active';
            btn[0].className = '';
        }

        // 右翻页
        btn[3].onclick = function () {
            console.log(flag)
            num++;   // 0 1 2 3
            if (flag) {  // 顺序播放时
                if (num > arr.length - 1) {
                    num = 3;
                    alert('已经是最后一张啦！');
                }
                img.src = arr[num];
                // 修改标题
                ps[1].innerHTML = arr_title[num];

                // 当前页
                ps[0].innerHTML = (num+1) + '/' + arr.length;
            }else{   // 循环播放
                if(num > arr.length - 1){
                    num = 0;
                }
                img.src = arr[num];
                // 修改标题
                ps[1].innerHTML = arr_title[num];
                 // 当前页
                ps[0].innerHTML = (num+1) + '/' + arr.length;
            }

        }
        // 左翻页
        btn[2].onclick = function(){
            num--;
            if(flag){  // 顺序
                if(num < 0){
                    num = 0;   
                    alert('已经是第一张啦！')
                }
                img.src = arr[num];
                // 修改标题
                ps[1].innerHTML = arr_title[num];

                // 当前页
                ps[0].innerHTML = (num+1) + '/' + arr.length;
            }else{  // 循环
                if(num < 0 ){
                    num = arr.length - 1;
                }
                img.src = arr[num];
                // 修改标题
                ps[1].innerHTML = arr_title[num];

                // 当前页
                ps[0].innerHTML = (num+1) + '/' + arr.length;
            }
        }
        /*
            1.设定顺序，循环 开关 true-  false-

            2.翻页，右 ，先判断开关状态，如果顺序， 4321  如果循环 43214321

            3.翻页，左  .... 

            4.修改标题，当前页
        */


    </script>
</body>

</html>
顺序循环切换图片

代码

效果
