直播电商平台开发，顺序循环图片切换

1.body

<div class="box"><br>        <div class="btnbox"><br>        <button class="active">顺序播放</button><br>        <button>循环播放</button><br>    </div><br>        <div id="banner"><br>            <p>1/4</p><br>            <button id="leftbtn" ><i class="iconfont icon-icon_paging_left"></i></button><br>            <button id="rightbtn"><i class="iconfont icon-icon_paging_right"></i></button><br>            <img src="images/1.jpg" alt=""><br>            <p>最强小队集结</p><br>        </div>

2.css

    <style><br>        *{<br>            padding: 0;margin: 0;<br>        }<br>        .box {<br>            margin: 60px auto;<br>            width: 800px;<br>            height: 500px;<br>            text-align: center;<br>        }<br>        #banner{<br>            position: relative;<br>            width: 100%;<br>            height: 500px;<br>        }<br>        img {<br>            width: 100%;<br>            height: 100%;<br>            z-index: -1;<br>        }<br>        p{<br>            position: absolute;<br>            color: #fff;<br>            <br>            font-weight: bold;<br>            width: 100%;<br>            height: 30px;<br>            line-height: 30px;<br>        }<br>        p:nth-child(1){<br>            top: 0;<br>            left: 0;<br>        }<br>        p:last-child{<br>            bottom: 0;<br>            left: 0;<br>        }<br>        .btnbox{<br>            margin-bottom: 30px;<br>   <br>        }<br>        #banner button{<br>            position: absolute;<br>            width: 50px;<br>            height: 40px;<br>        }<br>        #leftbtn{<br>            left: 0;<br>            top: 50%;<br>            transform: translate(0,-50%);<br>        }<br>        #rightbtn{<br>            right: 0;<br>            top: 50%;<br>            transform: translate(0,-50%);<br>        }<br>        .active{<br>            background-color: coral;<br>            color: #fff;<br>        }<br>        .btnbox button{<br>            width: 80px;<br>            height: 30px;<br>        }<br>    </style>

3.js

  <script><br>            var btn = document.getElementsByTagName('button');<br>            var imgname = document.getElementsByTagName('p');<br>            var img = document.getElementsByTagName('img')[0];<br>            // 图片地址数组<br>            var imgsrc = ['images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg',];<br>            // 图片名字组<br>            var imgTitle = ['最强小队','帅·炸裂','强·无敌','龙化纳兹'];<br>            var flag = true;  //true  顺序    false 循环<br>            var num = 0;<br>            // 封装函数<br>            function qiehuan(){<br>                img.src = imgsrc[num];<br>                imgname[1].innerHTML = imgTitle[num];<br>                imgname[0].innerHTML = 1 + num + '/' + imgsrc.length;<br>                <br>            }<br>            // 顺序<br>            btn[0].onclick = function(){<br>                btn[1].className = '';<br>                this.className = 'active';<br>                flag = true;<br>            }<br>            <br>            // 循环<br>            btn[1].onclick = function(){<br>                btn[0].className = '';<br>                this.className = 'active';<br>                flag = false;<br>            }<br>            // 右翻页<br>            btn[3].onclick=function(){<br>                num++;<br>                if(flag){   //如果flag是true的话执行顺序播放<br>                    if(num > imgsrc.length - 1){<br>                        num = 3;<br>                        alert('这是最后一张了')<br>                    }<br>                    qiehuan();<br>                }else{<br>                    if(num > imgsrc.length - 1){<br>                        num = 0;<br>                    }<br>                    qiehuan();<br>                }<br>            }<br>            // 左翻页<br>            btn[2].onclick = function(){<br>                num--;<br>                if(flag){<br>                    if(num < 0){<br>                        num = 0;<br>                        alert('已经是第一张了')<br>                    }<br>                    qiehuan();<br>                }else{<br>                    if(num < 0){<br>                        num = imgsrc.length - 1;<br>                    }<br>                    qiehuan();<br>                }<br>            }<br>            <br>        </script>