简易轮播图

 思路：用js动态控制轮播图切换

        1.获取元素 用querySelector 和 querySelectorAll  声明全局变量count=0（控制播放第几

           张图）和 t (定时器)

        2.上翻页 

                2.1 绑定点击事件 

                        2.11 清空定时器  count--

                        2.12 if判断 如果翻到第一张 ，则回到最后一张

                        2.13 调用封装好的showOne()函数

        3. 下翻页

                3.1 绑定点击事件  

                        3.11    清空定时器   count++

                        3.12    if判断 如果翻到最后一张，则回到第一张

                        3.13    调用封装好的showOne()函数

        4.  显示播放的这张照片 （即showOne()函数）

                4.1 封装showOne()函数

                4.2 循环为所有按钮和图片清除切换的属性

                4.3 给count添加属性

        5. 自动播放 （即autoPlay()函数）

                5.1 封装autoPlay()函数

                5.2 设置定时器 

                        5.21 count++

                        5.22 if判断，如果翻到最后一张，则回到第一张

                        5.23调用showOne()

        6. 点击小点切换

                6.1   循环每个小点，给对象添加自定义属性    oBtns[i].qq = i

                6.2   绑定点击事件

                        6.21 清空定时器

                        6.22 count = this.qq

                        6.23 调用showOne()

        7. 鼠标移入事件（移入后，轮播图停止）

                7.1 绑定oBanner.onmouseover

                7.2 清空定时器

        8. 鼠标移出事件（移出后，轮播图继续）

                8.1 绑定oBanner.onmouseout

                8.2调用autoPlay()函数

css代码：

  <style>
        *{
            padding: 0;
            margin: 0;
        }
        img{
            margin: 50px auto;
            display: none;
            width: 1300px;
            height: 460px;
        }
        .banner{
            position: relative;
        }
        .btn{
            position: absolute;
            bottom: 10px;
            right: 200px;
            
         
         }
        .btn button{
            border-radius: 50%;
            width: 50px;
            height: 50px;
            background: #ccc;
            opacity: 0.5;
            border: 0;
            margin: 10px;
        }
        .btn .active{
            background-color: #ff0;
            opacity: 1;
        }
        .banner span{   
            width: 80px;
            height: 80px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            top: 50%;
            font-size: 60px;
            transform: translateY(-50%);
            color: #fff;
            text-align: center;
            line-height: 80px;
        }
        .show{
            display: block;
        }
        .next{
            right:8%; 
        }
        .prev{
            left: 8%;
        }
    </style>

html代码 ：

    <div class="banner">

        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
        <div class="btn">
            <button class="active"></button>
            <button></button>
            <button></button>
            <button></button>
        </div>
    
        <img class="show" src="images/banner1.jpg" alt="">
        <img src="images/banner2.jpg" alt="">
        <img src="images/banner3.jpg" alt="">
        <img src="images/banner4.jpg" alt="">

    </div>

js代码： 

var oBtns = document.querySelectorAll('button')
var oImgs = document.querySelectorAll('img')
var oPrev = document.querySelectorAll('.prev')
var oNext = document.querySelectorAll('.next')
var oBanner = document.querySelectorAll('.banner')

var count = 0   // 控制播放第几张图片

var t  // 定时器

        //上翻页
        oPrev.onclick = function(){
            clearInterval(t)
            count-- 
            if(count < 0){
                count = oImgs.length - 1 
            }
            //清除所有
            for(var i = 0 ; i < oBtns.length ; i++){
                oBtns[i].classList.remove('active');
                oImgs[i].classList.remove('show')
            }
            // 给count添加
            oBtns[count].classList.add('active')
            oImgs[count].classList.add('show')
        }


        //下翻页
        oNext.onclick = function(){
            clearInterval(t)
            count++ 
            if(count >= oImgs.length){
                count = 0
            }
            //清除所有
            for(var i = 0 ; i < oBtns.length ; i++){
                oBtns[i].classList.remove('active');
                oImgs[i].classList.remove('show')
            }
            // 给count添加
            oBtns[count].classList.add('active')
            oImgs[count].classList.add('show')
        }

        // 自动播放
        autoPlay()

        function autoPlay(){
            t = setInterval(function(){
                count++
                // 播放到最后一张的时候，回到第一张
                if(count >= oImgs.length){
                    count = 0
                }
                //清除所有
                for(var i = 0 ; i < oBtns.length ; i++){
                    oBtns[i].classList.remove('active');
                    oImgs[i].classList.remove('show')
                }
                // 给count添加
                oBtns[count].classList.add('active')
                oImgs[count].classList.add('show')
            },1000)
        }

        // 点击小点切换
        for(var i = 0 ; i < oBtns.length ; i++){
            // 给标签添加自定义属性
            // oBtns[i].setAttribute('index',i)
            // 给对象添加自定义属性
            oBtns[i].index = i ;
            oBtns[i].onclick = function(){
                count = this.getAttribute('index')
                clearInterval(t)
                for(var j = 0 ; j < oBtns.length ; j++){
                    oBtns[j].classList.remove('active')
                    oImgs[j].classList.remove('show')
                }
                this.classList.add('active')
                oImgs[this.index].classList.add('show')
                // oImgs[this.getAttribute('index')].classList.add('show')
             }
        }

        // mouseover 鼠标移入事件
        oBanner.onmouseover = function(){
            clearInterval(t)
        }

        // mouseout鼠标移出事件
        oBanner.onmouseout = function(){
            autoPlay()
        }