简单的jquery自动轮播图

最新推荐文章于 2024-04-15 10:28:24 发布

小野猫子

最新推荐文章于 2024-04-15 10:28:24 发布

阅读量5.7k

点赞数 6

分类专栏： jquery

本文链接：https://blog.csdn.net/Anything2207294253/article/details/82850878

版权

jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇文章刚好对初级jquery来说，代码量少，易懂。代码直接复制粘贴就能用，特别简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .pic{
            list-style: none;
            border: 0;
        }
        #box{
            width: 520px;
            height:280px;
            overflow: hidden;
            margin: 30px auto;
            position: relative;
            box-shadow: 10px 10px 5px #888888;
            border-radius:10px;
        }
        #box .pic li{
            display: inline-block;
        }
    </style>
</head>
<body>
<div id="box">
    <ul class="pic">
        <li><img src="https://img.alicdn.com/tfs/TB1m_Q_vN9YBuNjy0FfXXXIsVXa-520-280.jpg_q90_.webp" alt=""></li>
        <li><img src="https://img.alicdn.com/tfs/TB1jYXMwntYBeNjy1XdXXXXyVXa-520-280.jpg_q90_.webp" alt=""></li>
        <li><img src="https://aecpm.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg" alt=""></li>
        <li><img src="https://img.alicdn.com/simba/img/TB1k54Wr1uSBuNjSsziSuvq8pXa.jpg" alt=""></li>
        <li><img src="https://img.alicdn.com/tfs/TB1qI1Kv_tYBeNjy1XdXXXXyVXa-520-280.jpg_q90_.webp" alt=""></li>
    </ul>
</div>
<script>
    $(function () {
        var numberImg=$('.pic li').length;//获取图片的长度
        var index=0;//定义图片初始化个数
        setInterval(function () {
            index++;
            if(index==numberImg){
                index=0;
            }
            $('.pic li').eq(index).siblings().css("display","none");
            $('.pic li').eq(index).css("display","block");
        },2000);
    });
</script>
</body>
</html>

小野猫子

关注

6
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
简单的jquery自动轮播图

这篇文章刚好对初级jquery来说，代码量少，易懂。代码直接复制粘贴就能用，特别简单&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &amp
复制链接

扫一扫