jquery做轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

renlzrz

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量758

点赞数

本文链接：https://blog.csdn.net/renlzrz/article/details/89397940

版权

<body>
    <div class="contain">
        <ul class="contain_inner">
            <li class="item"><img src="../public/QQ截图20190419091559.jpg"/>0</li>
            <li class="item"><img src="../public/QQ截图20190419091610.jpg"/>1</li>
            <li class="item"><img src="../public/QQ截图20190419091625.jpg"/>2</li>
        </ul>
        <button class="btn_l"><</button>
        <button class="btn_r">></button>
    </div>
</body>

.contain {
        margin-left: 500px;
        position: relative;
    }
    .contain_inner {
        border: 1px solid red;
        list-style: none;
        position: relative;
        width: 100px;
        height: 100px;
        overflow: hidden;
        padding: 0;
    }
    .contain_inner > .item {
        position: absolute;
        left: 0;
        top: 0;
    }
    .btn_l,.btn_r {
        width: 15px;
        height: 15px;
        position: absolute;
        bottom: 35px;
    }
    .btn_l {
        left: 10px;
    }
    .btn_r {
        left: 75px;
    }

<script>
    // 图片变化
    function changeImg(index) {
        $('.item').eq(index).fadeIn().siblings().fadeOut()
    }

    // 自动变化
    var index = 0;
    changeImg(0);

    function autoPlay() {
        timer = setInterval(function () {
            index++;
            if (index === 3) {
                index = 0
            }
            changeImg(index)
            console.log(index);
        },1500)
    }
    autoPlay();
    // 手动切换
    $('.btn_r').click(function () {
        index++;
        if (index === 3) {
            index = 0
        }
        changeImg(index)
        console.log(index);
    })
    // 停止事件
    $('.contain_inner,.btn_r').mouseenter(function () {
        clearInterval(timer);
    }).mouseleave(function () {
        autoPlay()
    })
</script>

renlzrz

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
jquery做轮播图

<body> <div class="contain"> <ul class="contain_inner"> <li class="item"><img src="../public/QQ截图20190419091559.jpg"/>0</li> &lt...
复制链接

扫一扫