淡入淡出轮播图（插件版）

时间 2019-12-01

标签淡入淡出插件繁體版

原文原文链接

html:css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淡入淡出效果轮播图</title>
    <link rel="stylesheet" href="css/swiper.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul, ol, li {
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="swiper">
        <ul class="swiper-wrapper">
            <li class="swiper-item actived">
                <img src="images/play/01.jpg" alt="图片">
            </li>
            <li class="swiper-item">
                <img src="images/play/02.jpg" alt="图片">
            </li>
            <li class="swiper-item">
                <img src="images/play/03.jpg" alt="图片">
            </li>
            <li class="swiper-item">
                <img src="images/play/04.jpg" alt="图片">
            </li>
            <li class="swiper-item">
                <img src="images/play/05.jpg" alt="图片">
            </li>
        </ul>
        <ol class="pagination"></ol>
        <div class="control-btns">
            <div class="prev-btn"></div>
            <div class="next-btn"></div>
        </div>
    </div>
    <script src="js/swiper.js"></script>
    <script>
        swiper({
            el: document.querySelector('#swiper'),
            pagination: document.querySelector('#swiper .pagination'),
            isAutoplay: true,
            duration: 5000
        });
    </script>
</body>
</html>

css:

#swiper {
    width: 900px;
    height: 350px;
    margin: 100px auto;
    position: relative;
}
.swiper-item {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: opacity 1s;
}
.swiper-item.actived {
    opacity: 1;
}
.swiper-item img {
    display: block;
}
.pagination {
    font-size: 0;
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.pagination li {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    font-size: 14px;
    border: 1px solid #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}
.pagination li.actived {
    border-color: #f60;
    color: #fff;
    background: #000;
}
.prev-btn, .next-btn {
    width: 40px;
    height: 100px;
    margin-top: auto;
    margin-bottom: auto;
    background: url("../images/play/index.png") no-repeat;
    cursor: pointer;
    position: absolute;
    top: 0;
    bottom: 0;
}
.next-btn {
    right: 0;
    background-position-x: -50px;
}

JS：

(function (w) {    function swiper (obj) {        //获取swiper元素        var swiper = obj.el;        //获取定时的时间间隔        var duration = obj.duration || 5000;        //获取图片容器        var swiperItems = document.querySelectorAll('.swiper-item');        //给上一张图片控制按钮        var prevBtn = document.querySelector('.control-btns .prev-btn');        //给下一张图片控制按钮        var nextBtn = document.querySelector('.control-btns .next-btn');        //标记当前索引        var currentIndex = 0;        //设置定时标记        var timerId = null;        //建立分页按钮        if (obj.pagination) {            for (var i = 0; i < swiperItems.length; i ++) {                var li = document.createElement('li');                li.innerHTML = i + 1;                obj.pagination.appendChild(li);            }            //获取分页按钮            var paginationItems = document.querySelectorAll('.pagination li');            //给分页按钮绑定单击事件            paginationItems.forEach(function (paginationItem, index) {                paginationItem.addEventListener('click', function () {                    currentIndex = index;                    setPlay();                })            });        }        //上来先初始化        setPlay();        //给上一张图片控制按钮绑定单击事件        prevBtn.addEventListener('click', function () {            setPlay('up');        });        //给下一张图片控制按钮绑定单击事件        nextBtn.addEventListener('click', function () {            setPlay('down');        });        //设置自动轮播         if (obj.isAutoplay) {             timerId = setInterval(function () {                 setPlay('down');             }, duration);             //鼠标放上中止轮播             swiper.addEventListener('mouseenter', function () {                 clearInterval(timerId);             });             //鼠标离开继续轮播             swiper.addEventListener('mouseleave', function () {                 timerId = setInterval(function () {                     setPlay('down');                 }, duration);             });         }        //封装函数，设置图片与分页按钮一一对应        function setPlay(direction) {            if (direction === 'up') {                currentIndex --;                if (currentIndex < 0) {                    currentIndex = swiperItems.length - 1;                }            }else if (direction === 'down') {                currentIndex ++;                if (currentIndex > swiperItems.length - 1) {                    currentIndex = 0;                }            }            //图片排他，分页按钮排他            swiperItems.forEach(function (swiperItem, index) {                swiperItem.classList.remove('actived');                if (obj.pagination) {                    paginationItems[index].classList.remove('actived');                }            });            //当前图片显示            swiperItems[currentIndex].classList.add('actived');            if (obj.pagination) {                //当前分页按钮高亮                paginationItems[currentIndex].classList.add('actived');            }        }    }    //暴露方法    w.swiper = swiper;})(window);