jq轮播图实现

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

        .box {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
            margin: 30px auto;
        }

        ul {
            width: 3000px;
            height: 300px;
            position: absolute;
        }

        ul li {
            list-style: none;
            width: 500px;
            float: left;
        }

        li img {
            width: 100%;
            height: 100%;
        }

        .next,
        .prev {
            width: 30px;
            height: 20px;
            background: black;
            color: #ffffff;
            font-size: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            bottom: 50%;
            right: 0;
            cursor: pointer;
        }

        .prev {
            left: 0;
            cursor: pointer;
        }

        .yuan {
            position: absolute;
            bottom: 7%;
            left: 35%;
        }

        .yuan span {
            width: 20px;
            height: 20px;
            background: red;
            border-radius: 50px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
            color: #ffffff;
            margin-left: 10px;
        }

        .yuan1 {
            background: blue !important;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li><img src="1.jpg" alt=""></li>
            <li><img src="2.jpg" alt=""></li>
            <li><img src="3.jpg" alt=""></li>
            <li><img src="4.jpg" alt=""></li>
            <li><img src="5.jpg" alt=""></li>
            <li><img src="1.jpg" alt=""></li>
        </ul>
        <div class="next">></div>
        <div class="prev"><</div>
             <div class="yuan">
                <span class="yuan1">1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
    </div>

</body>

</html>
<script src="jquery-2.1.4.min.js"></script>
<script>
    let Index = 0
    let timer = null
    // 下一个
    function next() {
        Index++
        let b = $('ul li').size() - 2
        if (Index > b) {
            $('ul').animate({ 'left': -Index * 500 + 'px' }, 1000, function () {
                $('ul').css('left', '0')
            })
            Index = 0
        }
        $('ul').animate({ 'left': -Index * 500 + 'px' }, 1000)
        yuan()
    }

    // 上一个
    function prve() {
        Index--
        let b = $('ul li').size() - 2
        if (Index < 0) {
            Index = b
            $('ul').css('left', -(Index + 1) * 500)
        }
        $('ul').animate({ 'left': -Index * 500 + 'px' }, 1000)
        yuan()
    }

    // 动画效果
    function donghua() {
        timer = setInterval(function () {
            next()
        }, 2000)
    }
    donghua()

    // 鼠标滑过
    $('.box').hover(function () {
        clearInterval(timer)
    }, function () {
        donghua()
    })

    // 分页器
    function yuan() {
        $('span').eq(Index).addClass('yuan1').siblings().removeClass('yuan1')
    }

    // 点击分页器切换
    $('span').click(function () {
        let a = Index - 1
        a = $(this).index()
        next()
    })

    // 左右按钮
    $('.next').click(function () {
        next()
    })
    $('.prev').click(function () {
        prve()
    })
</script>
最后编辑于：2020.05.08 14:24:38
禁止转载，如需转载请通过简信或评论联系作者。