javaScript系列---【条件if-切换图片循环or顺序】

html代码：

<div id="wrap">
        <button>顺序</button>
        <button>循环</button>
        <div id="box">
            <img src="img/1.jpg" alt="">
            <p class="title1">1/4</p>
            <p class="title2">美女1</p>
            <button class="leftBut">&lt;</button>
            <button class="rightBut">&gt;</button>
        </div>
    </div>

css代码：

 <style>
        * {
            padding: 0;
            margin: 0;
        }

        #wrap {
            width: 700px;
            text-align: center;
            margin: 0 auto;
        }

        #box {
            width: 700px;
            height: 525px;
            border: 1px solid;
            position: relative;
        }

        #box p {
            position: absolute;
            width: 100%;
            line-height: 30px;
            background: rgba(0, 0, 0, .3);
            color: #fff;
        }

        #box .title1 {
            top: 0;
        }

        #box .title2 {
            bottom: 0;
        }

        #box button {
            position: absolute;
            width: 35px;
            height: 50px;
            font-size: 30px;
            top: 50%;
            margin-top: -25px;
            background: rgba(0, 0, 0, .3);
            color: #fff;
        }

        #box .leftBut {
            left: 0;
        }

        #box .rightBut {
            right: 0;
        }
    </style>

js代码：

 <script>
        // 自定义数组
        //获取元素
        var wrap = document.getElementById("wrap");
        var btns = wrap.getElementsByTagName("button");
        var box = document.getElementById("box");
        var aImg = box.getElementsByTagName("img")[0];
        var oPs = box.getElementsByTagName("p");
        // 自定义标识
        // 默认是顺序结构（第一次运行页面）  点击循环就是循环，点击顺序就是顺序
        var flag = true; // 表示当前是顺序结构
        // 点击顺序或循环
        btns[0].onclick = function () {
            flag = true;
        }
        btns[1].onclick = function () {
            flag = false;
        }
        // 将数组中的值取出来赋值给图片的src
        var imgSrcArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg"];
        var n = 0; //默认值是0 展示第一张图片
        // 给左右按钮绑定事件
        btns[3].onclick = function () {
            // 每次点击让n的值自身加1
            n++;
            // 判断
            if (n === 4) {
                // 判断是顺序还是循环
                if (flag) { //顺序
                    n = 3;
                    alert("已经是最后一张了");
                } else { //循环
                    n = 0;
                }
            }
            // 给图片和描述赋值
            aImg.src = imgSrcArr[n];
            oPs[0].innerText = (n + 1) + "/4";
            oPs[1].innerText = "美女" + (n + 1);

        }

        // 给左右按钮绑定事件
        btns[2].onclick = function () {
            // 每次点击让n的值自身加1
            n--;
            // 判断
            if (n === -1) {
                // 判断是顺序还是循环
                if (flag) { //顺序
                    n = 0;
                    alert("已经是第一张了");
                } else { //循环
                    n = 3;
                }
            }
            // 给图片和描述赋值
            aImg.src = imgSrcArr[n];
            oPs[0].innerText = (n + 1) + "/4";
            oPs[1].innerText = "美女" + (n + 1);
        }
    </script>

 效果图：