新手程序员如何用JQuery写一个轮播图代码，详细解释

很酷的站长

发布于 2023-12-08 14:14:05

6480

文章被收录于专栏：站长的编程笔记站长的编程笔记

jQuery轮播图代码非常简单，

首先在HTML中创建一个轮播图容器，
然后在CSS中设置容器和图片的样式。
接着在JavaScript中使用jQuery选择器选中所有的图片，
并设置一个定时器，每隔3秒切换一张图片。

代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图示例</title>
    <style>
        /* 设置轮播图容器的宽度和高度 */
        .slider {
            width: 500px;
            height: 300px;
            overflow: hidden;
            position: relative;
        }
        /* 设置图片的宽度和高度 */
        .slider img {
            width: 100%;
            height: 100%;
            display: none; /* 默认隐藏所有图片 */
        }
        /* 设置当前显示的图片 */
        .slider img.active {
            display: block;
        }
    </style>
</head>
<body>
    <div>
        <!-- 添加图片 -->
        <img src="image1.jpg" alt="图片1">
        <img src="image2.jpg" alt="图片2">
        <img src="image3.jpg" alt="图片3">
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 获取所有图片
            var $images = $('.slider img');
            // 设置定时器，每隔3秒切换一张图片
            var timer = setInterval(function() {
                $images.removeClass('active'); // 移除当前显示的图片的active类
                $images.eq(0).addClass('active'); // 将第一张图片设置为当前显示的图片
                $images.not(':first').each(function(index) { // 遍历除第一张图片之外的其他图片
                    $(this).prev().addClass('active'); // 将前一张图片设置为当前显示的图片
                });
            }, 3000);
        });
    </script>
</body>
</html>

这里要注意的是，图片存放的路径，需要与程序所在路径相同。

不然得话，会出现找不到图片的问题。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

jquery