淡入淡出輪播圖（插件版）

時間 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);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。