网站图片轮播的使用方法，使用Jquery实现

最新推荐文章于 2024-11-01 10:15:45 发布

Hacker_2020

最新推荐文章于 2024-11-01 10:15:45 发布

阅读量165

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/weixin_40362806/article/details/82682271

前端专栏收录该内容

34 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的轮播图自动播放效果。通过设置定时器使轮播图能够自动播放，并在鼠标悬停时停止播放，离开时继续播放。此外还实现了点击按钮切换图片的功能。

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <style>
        .outer {
            width: 586px;
            height: 150px;
            overflow: hidden;
            position: relative;
        }

            .outer .imgs {
                position: absolute;
                top: 0;
            }

            .outer ul {
                position: absolute;
                padding: 0;
                margin: 0;
                list-style: none;
                right: 20px;
                bottom: 10px;
            }

                .outer ul li {
                    width: 10px;
                    height: 10px;
                    display: table-cell;
                }

                    .outer ul li a {
                        border: 1px solid #ffd800;
                        color: #ffd800;
                        background-color: white;
                        padding: 0px 4px;
                        line-height: 10px;
                        font-size: 12px;
                        margin-right: 2px;
                        cursor:pointer;
                    }

                        .outer ul li a.active {
                            background-color: #ffd800;
                            color: white;
                            font-size: 16px;
                        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="imgs">
            <img src="Images/1.gif" />
            <img src="Images/2.gif" />
            <img src="Images/3.gif" />
            <img src="Images/4.gif" />
            <img src="Images/5.gif" />
        </div>
        <ul>
            <li><a class="active">1</a></li>
            <li><a>2</a></li>
            <li><a>3</a></li>
            <li><a>4</a></li>
            <li><a>5</a></li>
        </ul>
    </div>

    <script src="Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            var interval = setInterval(play, 2000);

            $('.outer').hover(function () {
                clearInterval(interval);
            },
            function () {
                interval = setInterval(play, 2000);
            });
            $('li').click(function () {                
                var index = $(this).index();
                time = index-1;
                play();
            })
        })
        var time = 0;
        function play() {

            time++;

            var num = $('.imgs').children().length
            if (time <= num - 1)
                $('.imgs').animate({ top: -155 * time }, 1000);
            else {
                time = 0;
                $('.imgs').animate({ top: 0 }, 1000);
            }
            //切换按钮
            $('li a').removeClass('active');
            $('li a:eq(' + (time) + ')').addClass('active');
            console.log(time);
        }
    </script>
</body>
</html>