首页 > 内容 > 程序笔记 > 正文

程序笔记

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

2024-07-29 31

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>

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

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

更新于：1个月前

赞一波！

文章评论

全部评论

雷达智富

雷达智富

程序笔记

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

相关文章

文章评论