淡入淡出轮播（衔接前面一片）

作者: 不知道取个什么昵称不如娶个媳妇 | 来源:发表于2018-09-11 20:47 被阅读2次

淡入淡出轮播（衔接前面一片）
个人博客—轮播器
27.jquery 实战-轮播
Slider - 轮播图
jquery 轮播
轮播-淡入淡出
轮播图（2）——基于JQ的左右滑动轮播
轮播图淡入淡出的效果实现-----微信小程序
jQuery 幻灯片的实现原理
UIScrollView无缝衔接广告轮播

附上代码（其实脑瓜子疼）

/**
 * 淡入
 * @param element 待添加淡入动画效果的 DOM 元素对象
 * @param speed 限定运动的总时间
 * @param fn 在运动结束后需要继续执行的函数 
 */
function fadeIn(element, speed, fn) {
    element.style.display = "block";
    element.style.opacity = 0;
    animate(element, {opacity: 1}, speed, fn);
}

/**
 * 淡出
 * @param element 待添加淡出动画效果的 DOM 元素对象
 * @param speed 限定运动的总时间
 * @param fn 在运动结束后需要继续执行的函数 
 */
function fadeOut(element, speed, fn) {
    element.style.display = "block";
    element.style.opacity = 1;
    animate(element, {opacity: 0}, speed, function() {
        element.style.display = "none";
        fn && fn();
    });
}

<!-- 
    淡入淡出轮播的原理：
    将所有元素全都重叠在一起，并让第一张显示，其他图片隐藏
    当切换图片显示的时候，因为所有的img Dom元素可以选择得到
    所以，就可以使用元素节点列表操作元素，使得图片一张接一张
    的显示，经过js改变元素的opacity来改变元素的显示
 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
</head>

<style>
    *{
        margin: 0 ;
        padding: 0 ;
    }
    .container{
        width: 658px;
        height: 658px;
        border: 1px solid ;
        margin: 50px auto;
        position: relative;
    }
    /* 给父元素container设置定位，让子元素停靠 */
    ul{
        position: relative;
    }
    li{
        list-style: none;
    }
    ul li{
        position: absolute;
        display: none;
    }
    ol{
        position: absolute;
        height: 20px;
        width: 658px;
        background: rgba(0, 0, 0, 0.5);
        bottom:0px;
    }
    ol li{
        float: left;
        margin: 0 10px;
        cursor: pointer;
    }
    .show{
        color: #ad4;
    }   
    .container .btn .next,
    .container .btn .prev{
        position: absolute;
        z-index: 9;
        background: rgba(54, 32, 15, 0.5);
        width: 45px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 30px;
        cursor: pointer;
    } 
    .container .btn .next{
        right: 0px;
    }
</style>

<body>
    <div class="container">
        <ul>
            <li style="display:block;"><a href="#"><img src="images/11.jpg" alt="11"></a></li>
            <li><a href="#"><img src="images/12.jpg" alt="12"></a></li>
            <li><a href="#"><img src="images/13.jpg" alt="13"></a></li>
            <li><a href="#"><img src="images/14.jpg" alt="14"></a></li>
        </ul>
        <ol>
            <li class="show"><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
            <li><i class="fa fa-star"></i></li>
        </ol>
        <div class="btn">
            <span class="next">&gt;</span>
            <span class="prev">&lt;</span>
        </div>
    </div>
    <script src="tools.js"></script>
    <script>
    //让图片自动切换起来
    //首先要获取所有图片

        var lis = document.querySelectorAll("ul li");//获取到所有图片li标签
        var ol_lis = document.querySelectorAll("ol li");//获取所有星星li标签
        // console.log(lis);
        var len = lis.length;//获得li的数量；

        var currindex = 0;//状态量。表示当前li
        var nextindex = 1;//状态量。表示下一个li
        function play_animate(){
            fadeOut(lis[currindex],400);//淡出函数
            fadeIn(lis[nextindex],400);//淡入函数
            ol_lis[currindex].className = "";//移除对应图片的star的颜色
            ol_lis[nextindex].className = "show";//给下一个对应图片的star添加color
            currindex = nextindex;//将下一个赋值给当前
            nextindex++;//得到更下一个
            if(nextindex > len - 1){//如果元素越界，设置为0
                nextindex = 0;
            }
        }
        var timer = setInterval(play_animate,1000);//设置定时器

        var container = document.querySelector(".container");//获取大盒子
        container.onmouseenter = function (){//鼠标移入大盒子清除定时器
            clearInterval(timer);
        }
        container.onmouseleave = function(){//鼠标移出大盒子添加定时器
            timer = setInterval(play_animate,1000);
        }

        var ol = document.querySelector("ol");//获取ol
        var i_s = document.querySelectorAll("ol li i");//获取ol里面的i标签
        // console.log(ol);
        ol.onclick = function(event){//以事件委托的方式得到鼠标点击的i标签
            event = event||window.event;//兼容ie做法
            var source = event.target;//得到事件源
            if(source.nodeName === "I"){//判断事件源是不是i
                // console.log(source);
                // console.log(ol_lis);
                var index = Array.from(i_s).indexOf(source);//找到事件源的下标
                if(currindex === index ) return;//如果事件源的下标与标签的下标一样，表示当前下标对应当前图片，则不执行
                nextindex = index;//如果不相等，则，将事件源的下标赋值给 图片下标，即改变分、当前图片下标，让其显示
                play_animate();//调用动画函数来显示图片
            }
        }

        var next_ = document.querySelector(".btn .next");
        var prev_ = document.querySelector(".btn .prev");//获取prev和next按钮
        next_.onclick = function(){//next按钮按下，表明图片显示下一张，这与play_animate一样，点击则立即执行该函数
            play_animate();
        }
        prev_.onclick = function(){//prev按钮按下，表明图片显示上一张，而play_animate是显示下一张，所以这里要改变传入到fedain中的元素，这就需要他的序号减一
            nextindex = currindex - 1;//将当前图片序号减一赋给本来的下一张，达到改变序号的目的
            if(nextindex<0){//如果图片的序号已经小于0，那么就越出了边界，所以要判断一下
                nextindex = len -1;//条件成立，就让下一张的序号变为最后一张
            }
            play_animate();//调用函数
        }
        next_.onselectstart = function(event){
            event.preventDefault();//消除鼠标点击>选中变蓝的问题
        }
        prev_.onselectstart = function(event){
            event.preventDefault();//消除鼠标点击<选中变蓝的问题
        }
    </script>
</body>
</html>