jquery实现轮播图

最新推荐文章于 2024-03-14 19:48:19 发布

再来一遍？

最新推荐文章于 2024-03-14 19:48:19 发布

阅读量91

点赞数 1

本文链接：https://blog.csdn.net/weixin_46177455/article/details/105450667

版权

html代码

!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="./css/lunbo.css">
    <script src='./jquery/jquery-3.4.1.js'></script>
</head>

<body>
    <div class="content">
        <!--向左向右-->
        <span class="change left" id="left">&lt;</span>
        <span class="change right" id="right">&gt;</span>

        <!--轮播图片-->
        <ul class="picture" id="pictures">
            <li><img src="./img/1.jpg" class="1"></li>
            <li><img src="./img/6.jpg" class="2"></li>
            <li><img src="./img/7.jpg" class="3"></li>
            <li><img src="./img/12.jpg" class="4"></li>
            <li><img src="./img/17.jpg" class="5"></li>
        </ul>

        <!--提示圆点-->
        <div class="cloth">
            <ul class="dot" id="dots">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

    <script>
        //当前图片下标
        var currentIdex = 0;
        showPicture()

        //点击下一张
        $('#right').click(function () {
            getRight()
            showPicture()
        })
        function getRight() {
            currentIdex++;
            if (currentIdex == $('img').length) {
                currentIdex = 0
            }
        }
        //点击上一张
        $('#left').click(function () {
            getLeft()
            showPicture()
        })

        function getLeft() {
            currentIdex--;
            if (currentIdex == -1) {
                currentIdex = $('img').length - 1
            }
        }
        //根据下标显示图片
        function showPicture() {
            for (var i = 0; i < $('img').length; i++) {
                if (i == currentIdex) {
                    $('.picture li').eq(i).attr('class', 'active')
                } else {
                    $('li').eq(i).removeClass('active')
                }
            }

            for (var i = 0; i < $('.dot li').length; i++) {
                if (i == currentIdex) {
                    $('.dot li').eq(i).attr('class', 'actives')
                } else {
                    $('.dot li').eq(i).removeClass('actives')
                }
            }
        }
        //每3秒换一张
        setInterval(function () {
            getRight()
            showPicture()

        }, 5000)

        //给按钮添加点击效果
        for (var i = 0; i < $('.dot li').length; i++) {
            $('.dot li').eq(i).attr('data-index', i)
        }

        for (var i = 0; i < $('.dot li').length; i++) {
            $('.dot li').click(function (event) {
                currentIdex =$(event.target).attr('data-index')
                showPicture()
            })
        }


    </script>
</body>

</html>

css

*{
    padding: 0px;
    margin: 0px;
    list-style: none;
}

/*主区域*/
.content{
    top: 50px;
    margin: auto;
    width: 1000px;
    height: 530px;
    position: relative;
}

/*点击左右*/
.change{
    z-index: 10;
    width: 50px;
    height: 50px;
    top: 240px;
    display: block;
    position: absolute;
    font-size: 25px;
    color: white;
}
.change:hover{
    background-color: dimgray;
    border-radius: 50%;
    opacity: .6;
}
.left{
    left: 0;
    text-align: center;
    line-height: 50px;
    font-weight: 500;
}
.right{
    right: 0;
    text-align: center;
    line-height: 50px;
    font-weight: 500;
}


/*图片区域*/
.content .picture{
    width: 100%;
    height: 100%;
}

.content .picture li{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;

}

.content .picture li img{
    width: 100%;
    height: 100%;
}

.active{
    z-index: 9;
    opacity: 1!important;
    transition: all 2s;

}

/*圆点区*/
.cloth{
    width: 100%;
    height: 75px;
    bottom: 0px;
    background-color: lightblue;
    opacity: .3;
    z-index: 10;
    position: absolute;
}

.dot{
    margin: auto;
    height: 100%;
    width: 300px;
}

.dot li{
    display: inline-block;
    z-index: 10;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: black solid 1px;
    margin-left: 37px;
    margin-top: 35px;
}


.actives{
    background-color: black!important;
}

再来一遍？

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery实现轮播图

html代码!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图<...
复制链接

扫一扫