jquery实现轮播图-阿里云开发者社区

jquery实现轮播图

2023-08-15 47

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jquery实现轮播图

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .wrapper {
                width: 500px;
                height: 450px;
                border: 1px solid red;
                position: relative;
            }
            /* 5张图片叠加到一块 */
            .wrapper img {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                display: none;
            }
            .wrapper img:nth-of-type(1) {
                display: block;
            }
            /* 小圆点 */
            .btn {
                width: 150px;
                display: flex;
                justify-content: space-around;
                position: absolute;
                left: 175px;
                bottom: 10px;
                z-index: 100
            }
            .btn span {
                display: block;
                width: 15px;
                height: 15px;
                border: 3px solid white;
                border-radius: 50%;
            }
            /* 左右箭头 */
            .wrapper a {
                text-decoration: none;
                font-size: 50px;
                color: red;
                position: absolute;
                top: 35%;
            }
            .wrapper a:nth-of-type(1) {
                left: 10px;
            }
            .wrapper a:nth-of-type(2) {
                right: 10px;
            }
            .active {
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="contain">
                <img src="./img/063E06CD3FE5E7B2ABCF302ADE948464.jpg" alt="">
                <img src="./img/0F16C4EA63793241C0036F5F8343C24C.jpg" alt="">
                <img src="./img/13100EF368FB52266EA2158787F04145.jpg" alt="">
                <img src="./img/2FF8451CCDD6529E0B0FCB1090F2E03F.jpg" alt="">
                <img src="./img/2172B6BEA7D1DD84749967566E307170.jpg" alt="">
            </div>
            <div class="btn">
                <span class="active"></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <a href="javascript:void(0);">&lt;</a>
            <a href="javascript:void(0);">&gt;</a>
        </div>
        <script src="js/jquery-3.6.0.js"></script>
        <script>
            var index=0;
            // 点击上一张
            $("a:first").click(function(){
                prev_pic();
            })
            // 点击下一张
            $("a:last").click(function(){
                next_pic();
            })
            // 悬浮停止
            $(".wrapper").mouseover(function(){
                clearInterval(id);
            });
            $(".wrapper").mouseout(function(){
                    autoplay();
            })
            // 下一张
            function next_pic(){
                index++;
                if(index>4){
                    index=0;
                }
                addStyle();
            }
            // 上一张
            function prev_pic(){
                index--;
                if(index<0){
                    index=4;
                }
                addStyle();
            }
            // 控制图片显示隐藏,小圆点背景色
            function addStyle(){
                $("img").eq(index).fadeIn();
                $("img").eq(index).siblings().fadeOut();
                $("span").eq(index).addClass("active");
                $("span").eq(index).siblings().removeClass("active");
            }
            // 自动轮播
            var id;
            autoplay();
            function autoplay(){
                id=setInterval(function(){
                    next_pic();
                },1000)
            }
        </script>
    </body>
</html>

jquery实现轮播图

热门文章

最新文章

相关课程

相关电子书

相关实验场景