JQuery 图片轮播

最新推荐文章于 2025-06-09 13:21:12 发布

白沙王

最新推荐文章于 2025-06-09 13:21:12 发布

阅读量218

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_50784508/article/details/131292856

这段代码演示了一个使用jQuery库创建的图片轮播效果。它包含一个图片集合，每个图片都有一个对应的数字提示，用户可以通过点击数字来切换显示的图片。当鼠标悬停在数字提示上时，相应的图片会显示，其他图片则淡出。同时，代码还设置了自动切换图片的计时器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JQuery/jquery-1.7.1.min.js"></script>
    <style>
        #imgContainer div{
            position:absolute;
        }
        #imgContainer img{
            position:absolute;
            width:300px;
            height:300px;
            left:0px;
            top:0px;
        }
         #imgContainer{
             width:300px;
             height:300px;
             border:1px solid red;
             /*设置绝对定位，子元素的绝对定位是相对于父级元素的*/
             position:absolute;
             left:650px;
             top:10px;
         }
         .imgTip{
             border: 1px solid blue;
             background-color: green;
             color: white;
             padding: 3px;/*边距*/
             width: 10px;
             cursor:pointer;/*界面显示小手*/          
             z-index: 100;/*设置数据提示在图片上*/   
             bottom:10px;/*当前行往上10像素*/   
         }

        
      
    </style>
    <script>
        //定义一个图片的集合，指定图片的路径信息
        var list = ['images/zg.jpg', 'images/hg.jpg', 'images/mg.jpg', 'images/rb.jpg'];
        $(function () {
            $.each(list, function (index) {
                //根据数组生成所有的img图片
                $('<img src="' + this + '"/>').appendTo('#imgContainer');
                //根据图片生成数字提示
                $('<div class="imgTip">' + (index + 1) + '</div>')
                    .css('right', (4 - index) * 20 + 'px')//设置div的右边距
                    .appendTo('#imgContainer');

            });
            //设置第一张图片显示
            $('#imgContainer>img:gt(0)').hide();
            //设置提示数字的事件
            $('#imgContainer>.imgTip').hover(function () {//指向数字
                //然后选取几读取#imgContainer>img集合里面下标的图片,打开当前图片，关闭所有图片
                $('#imgContainer>img').eq(parseInt($(this).text()) - 1).slideDown().siblings('img').fadeOut();
                //清除自动播放定时器
                clearInterval(changeImgId);
                $(this).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
            }, function () {
                //更改图片索引
                i = parseInt($(this).text()) - 1;
                //鼠标移开时继续执行计时器（指向时关闭了）
                changeImgId = setInterval(pic, 2000);
            })
            //默认让第一个数字背景变为蓝色
            $('#imgContainer>.imgTip').eq(0).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
            //计时器使用图片轮播的方法
            changeImgId=setInterval(pic, 2000);
        });
        var i = 0;
        //图片轮播的方法
        function pic() {   

                    i++;
                    if (i > list.length) {
                    i = 0;
                    }
                    //读取#imgContainer>img集合里面下标的图片,打开当前图片，关闭所有图片
                    $('#imgContainer>img').eq(i).slideDown(1000).siblings('img').fadeOut(1000);
                    $('#imgContainer>.imgTip').eq(i).css('background-color', 'blue').siblings('.imgTip').css('background-color', 'green');
                };

    </script>
</head>
<body>
    <div id="imgContainer"></div>
        
</body>
</html>