運動版輪播圖

<!DOCTYPE html>
<html lang="en">

<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>
    <style>
        * {
            padding:  
0;
            margin: 0;
            list-style: none;
        }

        .banner {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 20px auto;
            overflow: hidden;
            background-color: #f00;
        }

        .banner ul {
            width: 2500px;
            height: 400px;
            display: flex;
            position: absolute;
        }

        .banner ul li {
            width: 500px;
            text 
-align: center;
            line-height: 400px;
            font-size: 50px;
        }

        .banner ul li img {
            width: 100%;
            height: 100%;
        }

        span {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 0;
            bottom:  
0;
            margin: auto;
            background-color: rgba(0, 0, 0, .5);
            text-align: center;
            color: #fff;
            line-height: 30px;
        }

        .next {
            right: 0;
        }

        ol {
            width: 100%;
            display: flex;
            justify-content: center;
            position: absolute;
            bottom: 10px;
        }

        ol li {
            width: 20px;
            height: 20px;
            background-color: #ff0;
            margin: 10px;
        }

        .active {
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <div class="banner">
        <ul>
            <li><img src="../images/1.jpg" alt=""></li>
            <li><img src="../images/2.jpg" alt=""></li>
            <li><img src="../images/3.jpg" alt=""></li>
            <li><img src="../images/4.jpg" alt=""></li>
            <li><img src="../images/1.jpg" alt=""></li>
        </ul>
        <span class="prev">&lt;</span>
        <span class="next">&gt;</span>
        <ol>
            <li class="active" id="li"></li>
            <li id="li"></li>
            <li id="li"></li>
            <li id="li"></li>
        </ol>
    </div>
    <script>
        var obanner = document.querySelector('.banner')
        var oprev = document.querySelector('.prev')
        var onext = document.querySelector('.next')
        var oactive = document.querySelector('.active')
        var oul = document.querySelector('ul')
        var oulli = document.querySelectorAll('ul li')
        console.log(oulli)
        console.log(oulli.length)
        var oolli = document.querySelectorAll('ol li')
        var index = 0
        var t
        var liX = oulli[0].offsetWidth
        console.log(liX)

        oolli.forEach(function (val, i) {
            val.index = i
        })
        var flag = true
        window.onblur = function () {
            clearInterval(t)
        }
        window.onfocus = function () {
            autoPlay()
        }
        //自動播放
        autoPlay()

        obanner.onclick = function (e) {
            var e = e || event
            var target = e.target || e.srcElement


            if (flag) {
                if (target.className == 'next') {

                    clearInterval(t)
                    //判斷是不是最後一張
                    if (index == oulli.length - 1) {
                        index = 0
                        oul.style.left = 0
                    }

                    index++
                    move(-liX * index, 30, oul, 'left')
                    active()

                }

            }

            if (flag) {

                if (target.className == 'prev') {
                    //先判斷是不是最後一張
                    clearInterval(t)
                    if (index == 0) {
                        index = oulli.length - 1
                        oul.style.left = -liX * index + 'px'
                    }
                    index--
                    move(-liX * index, 30, oul, 'left')

                    active()
                }
            }

            if (flag) {
                if (target.id == 'li') {

                    clearInterval(t)
                    index = target.index

                    move(-liX * index, 30, oul, 'left')

                    active()
                    if (target.id == 'li') {
                        return false
                    }

                }
            }




        }


        function autoPlay() {

            clearInterval(t)
            t = setInterval(function () {
                index++
                move(-liX * index, 30, oul, 'left', function () {
                    if (index == oulli.length - 1) {   //4
                        console.log(6666666)
                        index = 0
                        oul.style.left = 0
                    }
                })
                active()
            }, 2000)


        }

        function active() {
            oolli.forEach(function (val) {
                val.classList.remove('active')
            })
            if (index == oulli.length - 1) {
                oolli[0].classList.add('active')
            } else {

                oolli[index].classList.add('active')
            }
        }
        function move(end, speed, ele, attr, fb) {
            var sta = parseInt(getStyle(ele, attr))
            var speed = end > sta ? speed : -speed
            clearInterval(t)
            var t = setInterval(function () {
                flag = false
                sta += speed
                ele.style[attr] = sta + 'px'
                if (Math.abs(end - sta) < Math.abs(speed)) {
                    sta = end
                    ele.style[attr] = sta + 'px'
                    clearInterval(t)
                    flag = true
                    if (fb) {
                        fb()
                    }
                }
            }, 30)
        }

        function getStyle(ele, attr) {
            if (window.getComputedStyle) {
                return getComputedStyle(ele)[attr]
            } else {
                return ele.currentStyle[attr]
            }
        }
    </script>


</body>

</html>

運動版輪播圖

原生JS運動實現輪播圖

JS實現橫向輪播圖（初級版）

JS實現縱向輪播圖（初級版）

JS實現橫向輪播圖（中級版）

Flutter 輪播圖（基礎版）

輪播圖透明度版

js輪播圖改進版

直播軟體搭建，橫版自動滑動的輪播圖

GKCycleScrollView - 一個輕量級的自定義輪播圖元件

兩行IOS程式碼實現輪播圖

React Native中ScrollView元件輪播圖與ListView渲染列表元件用法例項分析

JS實現普通輪播圖特效

js實現左右輪播圖

jQuery實現輪播圖效果demo

JS實現輪播圖效果

原生js實現無縫輪播圖

js實現輪播圖效果 z-index實現輪播圖

js實現自動播放勻速輪播圖

JavaScript實現PC端橫向輪播圖

運動版輪播圖

相關推薦