HTML、JQ+JS实现轮播图

花~盗

于 2021-12-11 23:25:03 发布

阅读量239

点赞数 1

分类专栏： JS+JQ 文章标签： javascript html jquery

本文链接：https://blog.csdn.net/ypf3442354429/article/details/121881437

版权

JS+JQ 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

该方法主要用了定时函数(setInterval)于显示show淡出fadeOut()和追加方法(appendTo)及背景颜色的改变完成。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <script src="js/jquery.js"></script>
    <script src="js/jquery-1.8.3.min.js"></script>
</head>
<style>
    img{
        display: none;
    }
    div img:first-child{
        display: inline-block;
    }
    div{
        width: 100%;
        position: absolute;
        top: 800px;
        text-align: center;
    }
    ul li{
        list-style: none;
        display: inline-block;
        width: 40px;
        height: 40px;
        background: #757575;
        border-radius: 50%;
        color: white;
        text-align: center;
        line-height: 40px;
    }
    ul li:first-child{
        background: skyblue;
    }
    ul{
        position: absolute;
        top: 1310px;
        left: 48%;
    }
</style>
<body>
<div>
    <img src="images/ban1.jpg" width="1125" height="594" alt="">
    <img src="images/ban2.jpg" width="1125" height="594" alt="">
    <img src="images/ban3.jpg" width="1125" height="594" alt="">
    <img src="images/ban4.jpg" width="1125" height="594" alt="">
</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
<script>
    $(document).ready(function () {
        var num=0;
        function one() {
            $("div>img:eq(0)").show();
            $("div>img:first-child").fadeOut(2500,function () {
                $(this).appendTo("div");
            });
        }
        setInterval(function () {
            $("ul>li:eq("+num+")").css("background","#757575");
            num++;
            if (num===4){
                num=0;
            }
            $("ul>li:eq("+num+")").css("background","skyblue");
        },2500);
        setInterval(one,50);
    })
</script>
</html>

花~盗

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML、JQ+JS实现轮播图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <script src="js/jquery.js"></script> <script src="js/jquery-1.8.3.min.js"></script></head>.
复制链接

扫一扫