第17课——轮播图小案例

小案例

轮播图
1.透明度方法轮播
    透明度轮播原理就是通过透明度为0的元素是完全透明，透明度为1的元素的元素是完全呈现在页面上
    然后通过setInterval间隔改变这一张图片与下一张图片透明度的轮换，然后通过transition属性在
    转换过程中显现出动画的效果，具体实现过程是以下的代码：

```css
<style>
    .container {
        width: 520px;
        margin: 0 auto;
    }
    .imgContainer {
        position: relative;
        width: 520px;
        height: 280px;
        margin: 0 auto;
    }

    .imgContainer div img {
        position: absolute;
        transition: opacity 2s;
        opacity: 0;                             //其他全透明
    }
    .imgContainer div:nth-of-type(1) img{       //第一张全显示
        opacity: 1;
    }
    .right {
        margin: 0 auto;
        font-size: 16px;
        color: rgb(29, 120, 148);
    }
</style>
```
```html
<div class="container">
    <div class="imgContainer">
        <div><img src="../images/1t.png" alt=""></div>
        <div><img src="../images/2t.png" alt=""></div>
        <div><img src="../images/3t.png" alt=""></div>
    </div>
    <button class="right">下一张</button>
</div>
```
```js
<script>
    var flag = 0 ;              //控制第几张图
    autoPlay();                 
    function autoPlay(){        //自动播放方法
        var imgEles = document.querySelectorAll(".imgContainer div img");
        var timer = setInterval(function (){
            flag ++ ;           //用flag控制播到第几张
            imgEles.forEach(function(imgEle){
                imgEle.style.opacity = 0 ;  //将其他的几张图设置为全透明
            });
            flag %= 3 ;                     //每三张一个循环
            imgEles[flag].style.opacity = 1 ;   ///将当前图片透明度为全部显示
        },2000);
        chanPlay(timer);                    //手动切换图片函数，传入的是计时器
    }
    function chanPlay(timer){       
        var imgEles = document.querySelectorAll(".imgContainer div img");   
        var btn = document.querySelector(".right");     //获取手动切换按钮元素
        btn.onmouseenter = function (){                 //鼠标移入就停止事件间隔器
            clearTimeout(timer);
        }
        btn.onclick = function () {
            flag ++ ;                               //如果点击下一张切换去下一张
            imgEles.forEach(function(imgEle){       //让其他的图片透明
                imgEle.style.opacity = 0 ;
            });
            flag %= 3 ;
            imgEles[flag].style.opacity = 1 ;       //当前图片全显示 
        }
        btn.onmouseleave = function (){
            autoPlay();                             //鼠标离开按钮区域就再次开启自动播放方法
        }
    }
</script>
```
这里只写了点击下一张的方法，在chanPlay()方法中，还可以添加上一张，以及可以在图片底部设置小圆点，配合选项卡做悬浮切图功能
2.js控制轮播
    利用间隔定时器控制绝对定位元素的位移，以及请求动画帧方法做动画轮播效果

```css
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 2600px;
            height: 280px;
            left: 0px;
        }

        .imgContainer img {
            float: left;
        }

        .nextPre {
            width: 520px;
            height: 50px;
            font-size: 40px;
            position: absolute;
            top: 40%;
            color: white;
        }

        .nextPre span:nth-child(1) {
            float: left;
            cursor: pointer;
        }

        .nextPre span:nth-child(2) {
            float: right;
            cursor: pointer;
        }
        .dot{
            width: 520px;
            height: 50px;
            position:absolute;
            bottom: 5%;
            display: flex;
            justify-content: center;
            text-align: center;

        }
        .dot div{
            display: flex;

        }
        
        .dot span{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: red;
            display: block;
            margin: 5px;
        }
    </style>
```
```html
    <div class="container">
        <div class="imgContainer">
            <img src="../images/1t.png">
            <img src="../images/2t.png">
            <img src="../images/3t.png">
            <img src="../images/4t.png">
            <img src="../images/5t.png">
        </div>
        <div class="nextPre"><span>< </span><span>></span></div>

        <div class="dot"><div><span style="background: white;"></span><span></span><span></span><span></span><span></span></div></div>
    </div>
```
```js
<script>
    // 1。上一页（复制最后一张到第一张前面） 和下一页 （无限轮播）
    // 鼠标移入 imgContainerEle 停止自动轮播
    // 2.点 
    // 
    // 1.自动轮播  ：无限轮播 2.上一页 和下一页  3.点 改变轮播图；

    //一、 鼠标移入时候停止轮播图自动播放 ，鼠标移除的时候 轮播图开始播放；
    // 二、下一页 上一页 ；

    var imgContainerEle = document.querySelector(".imgContainer");

    var containerEle = document.querySelector(".container");

    var page = 1;// 代表当前的图片  :当前图片现实的数字；

    // 自动播放 
    function autoPlay() {
        
        var timer = setInterval(function () {
            console.log("setinterval",page);
            move(imgContainerEle, -520 * page-520, "left", function () {
                // console.log("运动完成");
                page++;
                if (page == 6) {
                    page = 1;
                    imgContainerEle.style.left = "-520px";
                }
                changeDot();
            })
        }, 2000);
        // 鼠标移入 和移除事件；：onmouseover onmouseout；  onmouseenter  onmouseleave
        containerEle.onmouseenter = function () {
            // 停止轮播自动播放
            console.log("停止");
            clearInterval(timer)
        }
        containerEle.onmouseleave = function () {
            console.log("移除");
            autoPlay()
        }
    }
    cloneElement();
    autoPlay();

    // 改变点的位置
    function changeDot(){
        var spans = document.querySelectorAll(".dot span");
        console.log(spans)
        // 先全部变成红色 
        spans.forEach(function(item){
            item.style.background = "red";
        })
        // 和page一样的点变成白色；
        spans.forEach(function(item,key){
            if(key==(page-1)){
                console.log("点",item);
                item.style.background = "white";
            }
        })
    }


    // 克隆元素；
    // deepCopy
    function cloneElement() {

        // 克隆第一个元素放在最后
        var firstEle = imgContainerEle.firstElementChild.cloneNode(true);
      
        // 克隆第五个元素到第一个前面
        var lastEle = imgContainerEle.lastElementChild.cloneNode(true);
        // 把克隆的元素放在第一个元素之前；
        imgContainerEle.insertBefore(lastEle,imgContainerEle.firstElementChild)
        
        imgContainerEle.style.width = "3640px";
        imgContainerEle.appendChild(firstEle);
        // 把第一张显示左边的偏移量 改成-520；
        imgContainerEle.style.left = "-520px";
    }


    // 上一页和下一页功能
    var eles = document.querySelectorAll(".nextPre span");

    // 下一页功能
    eles[1].onclick = function () {
        //下一页；
        move(imgContainerEle, -520 * page-520, "left", function () {
                // console.log("运动完成");
                page++;
                console.log(page);
                if (page == 6) {
                    page = 1;
                    imgContainerEle.style.left = "-520px";
                }
            })
    }

    // 上一页功能
    // 当前在2页 -520*3= -1560px  ---》1040px
    eles[0].onclick = function(){
        // page--;
        move(imgContainerEle, -520 * page+520, "left", function () {
                // console.log("运动完成");
                page--;
                console.log(page);
                if(page==0){
                    page = 5;

                    imgContainerEle.style.left = "-2600px";
                }
                // if (page == 6) {
                //     page = 1;
                //     imgContainerEle.style.left = "0px";
                // }
            })
    }



    // 点击圆点切换到对应的图；
    var spans = document.querySelectorAll(".dot span");
    spans.forEach(function(item,key){
        item.onclick = function(){
            console.log(key)
            // 其他的全部变成红色；
            spans.forEach(function(item){
                item.style.background = "red";
            })

            this.style.background = "white";

            var num = key+1;
            move(imgContainerEle, -520 * num, "left", function () {
                console.log("运动完成");
                page = num;
            })
        }
    })

    // 运动函数
    function move(ele, target, dir, cb) {
        function fn() {
            var num = parseInt(getComputedStyle(ele)[dir]);
            var speed = target < num ? -10 : 10;
            if (num == target) {
                // console.log("停止了");
                cb && cb();
            } else {
                num += speed;
                ele.style[dir] = num + "px";
                requestAnimationFrame(fn);
            }
        }
        fn();
    }
</script>
```

3.数据模式的轮播
    在数据模式中，经常与遇到预加载，数据获取，当我们将数据预加载带入轮播，会发现预加载会解决轮播长时间不在本页面
    然后切换回来轮播会长时间切图，造成很差的用户体验。这是因为我们虽然不在此页面，但是时间间隔器函数还是会不断的
    执行。我们可以用页面切换监控，但是还可以用预加载消除这种影响

```css

    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 1560px;
            height: 280px;
            left: -520px;
        }

        .imgContainer img {
            float: left;
        }
        .right {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            right: 5px;
        }
        .left {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
        }
    </style>
```
```html

<div class="container">
    <!-- <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div> -->
    <div class="right">&gt;</div>
    <div class="left">&lt;</div>
    <div class="imgContainer">
    </div>
</div>
```
```js

<script>
    var objArr = [
        {
            page:1,
            src:'./images/1t.png'
        },{
            page:2,
            src:'./images/2t.png'
        },{
            page:3,
            src:'./images/3t.png'
        }
        ,{
            page:4,
            src:'./images/4t.png'
        },{
            page:5,
            src:'./images/5t.png'
        }
    ];
    var numArr = [objArr.length , 1 , 2];
    function getImg( arr ){
        var imgArr = arr.map(function ( item ){
            for( var i = 0 ; i < objArr.length ; i ++ ){
                if ( item == objArr[i].page ){
                    return objArr[i] ;
                }
            }
        });
        return imgArr ; 
    }

    renderDom();
    autoPlay ();

    function renderDom(){
        var imgContainer = document.querySelector(".imgContainer");
        imgContainer.innerHTML = '' ;
        var imgArr = getImg( numArr ) ; 
        imgArr.forEach(function( obj , key ){
            var img = document.createElement("img");
            img.src = obj.src;
            imgContainer.appendChild(img);
        });
    }
    
    var imgContainer = document.querySelector(".imgContainer");
    function autoPlay (){
        var imgContainer = document.querySelector(".imgContainer");
        var target = -520 ; 
        var timer = setInterval(function(){
            if ( target == -1040 ){
                target = -520 ;
                imgContainer.style.left = `${target}px`
                renderDom();
            }
            target = target - 520 ; 
            numArr = numArr.map(function( item ){
                return  item % objArr.length + 1 ;
            });
            changePage( timer , target );
        },2000);
    }
    function changePage( timer ){
        var prePage = document.querySelector(".left");
        var nextPage = document.querySelector(".right");
        var imgContainerEle = document.querySelector(".imgContainer");
        var containerEle = document.querySelector(".container");
        imgContainerEle.onmouseenter = function (){
            clearTimeout(timer);
            prePage.onclick = function (){
                numArr = numArr.map(function( item ){
                    if( item == 1 ){
                        return item * objArr.length ;
                    } else {
                        return item - 1 ;
                    }
                });
                renderDom();
            }
            nextPage.onclick = function (){
                numArr = numArr.map(function( item ){
                    return  item % objArr.length + 1 ;
                });
                renderDom();
            }
        }
        containerEle.onmouseleave = function (){
            autoPlay();
        }
    }
</script>
```
这种方式每次只加载当前张，前面一张和后面一张，每次只需要调取三张图片。当页面切换，间隔计时器虽然在不断执行，但是每次数据只会显示三张，页面切回后也只会显示下一张，而不会一直朝前走的尴尬局面