jquery之滑动轮播

最新推荐文章于 2022-01-18 14:10:07 发布

cersei1230

最新推荐文章于 2022-01-18 14:10:07 发布

阅读量241

点赞数

分类专栏： js html

本文链接：https://blog.csdn.net/weixin_45107630/article/details/100637570

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

html

9 篇文章 0 订阅

订阅专栏

滑动轮播：

简单思路：利用两个嵌套的盒子，内部的盒子放图片，并设置绝对定位，设置左右两个按钮，定义一个变量，点击按钮时，变量加加，根据变量来让内部的盒子左右移动，就实现了滑动轮播。
代码如下所示：

<!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>
    <script src="./jquery-3.4.1.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .box {
        position: relative;
        width: 600px;
        height: 300px;
        margin: 100px 0 0 100px;
        border: 1px solid #cdcdcd;
        overflow: hidden;
    }

    .move {
        position: absolute;
        width: 600px;
        height: 300px;
        display: flex;
        justify-content: space-between;
        transition: left 0.2s linear;
        left:0;
        /* overflow: hidden; */
    }

    .move img {
        width: 600px;
        height: 300px;
    }

    .btn {
        width: 100%;
        position: absolute;
        top: 50%;
    }

    .btn-left {
        display: block;
        float: left;
        width: 40px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 25px;
        text-align: center;
        line-height: 30px;
        color: azure;

    }

    .btn-right {
        display: block;
        float: right;
        width: 40px;
        height: 30px;
        background-color: rgba(0, 0, 0, 0.5);
        font-size: 25px;
        text-align: center;
        line-height: 30px;
        color: azure;
    }

    .list {
        width: 100px;
        height: 20px;
        position: absolute;
        display: flex;
        justify-content: space-between;
        bottom: 20px;
        left: 230px;

    }

    .list li {
        list-style: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background-color: #fff;
    }
</style>

<body>
    <div class="box">
        <div class="move">
            <img src="./img/0.png" alt="">
            <img src="./img/1.png" alt="">
            <img src="./img/2.png" alt="">
            <img src="./img/3.png" alt="">
            <img src="./img/4.png" alt="">
        </div>
        <div class="btn">
            <span class="btn-left">
                <</span> <span class="btn-right">>
            </span>
        </div>
        <!-- <ul class="list">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul> -->
    </div>
</body>

</html>
<script>

    var count = 0;

    function next() {
        count++;
        if (count == $('.move img').length) {
            count = 0;
        }
     
        $('.move').css({
            left: count * -600 + 'px'
        });
     
        // console.log(count)

    }
    console.log(
$('.move img').index()
    );
    
    // var ll = next()    
    console.log(count)

    function prev() {
        count--;
        if (count == -1) {
            count = $('.move img').length - 1;
        }
        // console.log(count)
        $('.move').css({
            left: count * -600 + 'px'
        });
        
     

    }

    // function show() {
    //     $('.move').css({
    //         left: count * -600 + 'px'
    //     });
    // }

    $('.btn-right').click(function () {
        next();

        // console.log('aaa')
    })

 

    $('.btn-left').click(function () {
        prev();
    })
    setInterval(() => {
        next()
    }, 1000)



</script>

下面是效果截图

在这里插入图片描述