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

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

1.body

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

​

2.css

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

3.js

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

以上就是直播电商平台开发，顺序循环图片切换， 更多内容欢迎关注之后的文章