学完了JQuery，还不会写banner图？（含完整源码）

最新推荐文章于 2026-05-31 07:54:20 发布

原创最新推荐文章于 2026-05-31 07:54:20 发布 · 303 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JQuery

本文详细介绍如何使用 JQuery 实现一个带有导航点的 Banner 图轮播效果，包括 HTML 结构、CSS 样式及 JQuery 动画控制，实现图片自动轮播和鼠标悬停暂停功能。

学完了JQuery，还不会写banner图？恐怕不太好鸭~~

JQuery实现banner图

先来看看最终效果：

我们先来看一下整体的布局：

<body>
    <div id="play">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul>
            <li><a href="*"><img src="./img/1.jpg"/></a></li>
            <li><a href="*"><img src="./img/2.jpg"/></a></li>
            <li><a href="*"><img src="./img/3.jpg"/></a></li>
            <li><a href="*"><img src="./img/4.jpg"/></a></li>
            <li><a href="*"><img src="./img/5.jpg"/></a></li>
            <li><a href="*"><img src="./img/1.jpg"/></a></li>
        </ul>
    </div>
</body>

首先，我们的body部分有一个div,div里面有一个有序列表ol和一个无序列表ul。ol中的li是用来显示我们当前运动到第几张图片的，如图所示：

在这里插入图片描述
ul中的li用来放我们要呈现的这些图片，如图：

在这里插入图片描述
本例banner图的基础原理如图：其中，div的宽、高为一个图片的宽度和高度，给div设置overflow:hidden,然后让ul每次向上移动一个图片的高度，从而实现轮播的效果。

css样式代码如下：

*{margin:0;padding:0}
img{border:none}
li{list-style: none;}

body{background-color:#ecf9ff}

#play{width:470px;height:150px;border:1px;margin:150px auto;position:relative;}
ul{position:absolute}  /* 注意要设置ul的position为absolute，否则ul不会上移动 */
ul li a{display:block;width:470px;height:150px;}
ul li img{width:100%;height:100%}
ol{position:absolute;bottom: 7px;right:8px;z-index:2;cursor:pointer}
ol li{float:left;width:19px;height:19px;border:1px solid #f47500;background-color:#fcf2cf;color:#f47500;text-align:center;z-index: 1;margin-left:3px;font-size:9px;}
.active{background-color:#ffb442;color:white;font-weight:bold}

js部分：

<script type="text/javascript">
        $(function(){
            var oBtns = $("#play ol li");
            var oUl = $("#play ul");
            var oLis = oUl.find("li");
            
            var isNow = 0; //记录当前显示图片的下标
            var timer = null;
            oBtns.click(function(){
                isNow = $(this).index();  //获取当前节点在兄弟节点中的下标
                tab();
            })

            $("#play").mouseenter(function(){  //鼠标移入时，轮播暂停
                clearInterval(timer);
            }).mouseleave(function(){   //鼠标移出时继续
                timer = setInterval(function(){
                    isNow++;
                    tab();
                }, 2000);
            })

            //设置定时器
            timer = setInterval(function(){
                isNow++;
                tab();
            }, 2000)

            function tab(){
                oBtns.attr("class", "").eq(isNow).attr("class", "active");
                if(isNow == oBtns.size()){
                    oBtns.eq(0).attr("class", "active"); 
                    //判断，若当前显示图片下标为当前按钮个数时，将oBtns中的第一个按钮（即ol中的第一个li）的class置为active
                }
                oUl.animate({
                    top:isNow * -150  //使ul整体向上移动，
                }, 500, function(){
                    if(isNow == oBtns.size()){  //判断，若当前显示图片下标为当前按钮个数时，将isNow置为0，将ul的top值置为0
                        isNow = 0;
                        oUl.css("top", "0");
                    }
                })
            }  
        })
    </script>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery实战--banner图</title>
    <style type="text/css">
        *{margin:0;padding:0}
        img{border:none}
        li{list-style: none;}

        body{background-color:#ecf9ff}

        #play{width:470px;height:150px;border:1px;margin:150px auto;position:relative;overflow:hidden}
        ul{position:absolute}  /* 注意要设置ul的position为absolute，否则ul不会上移动 */
        ul li a{display:block;width:470px;height:150px;}
        ul li img{width:100%;height:100%}
        ol{position:absolute;bottom: 7px;right:8px;z-index:2;cursor:pointer}
        ol li{float:left;width:19px;height:19px;border:1px solid #f47500;background-color:#fcf2cf;color:#f47500;text-align:center;z-index: 1;margin-left:3px;font-size:9px;}
        .active{background-color:#ffb442;color:white;font-weight:bold}
    </style>
    <script src="./jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var oBtns = $("#play ol li");
            var oUl = $("#play ul");
            var oLis = oUl.find("li");

            var isNow = 0; //记录当前显示图片的下标
            var timer = null;
            oBtns.click(function(){
                isNow = $(this).index();  //获取当前节点在兄弟节点中的下标
                tab();
            })

            $("#play").mouseenter(function(){  //鼠标移入时，轮播暂停
                clearInterval(timer);
            }).mouseleave(function(){   //鼠标移出时继续
                timer = setInterval(function(){
                    isNow++;
                    tab();
                }, 2000);
            })

            //设置定时器
            timer = setInterval(function(){
                isNow++;
                tab();
            }, 2000)

            function tab(){
                oBtns.attr("class", "").eq(isNow).attr("class", "active");
                if(isNow == oBtns.size()){
                    oBtns.eq(0).attr("class", "active"); 
                    //判断，若当前显示图片下标为当前按钮个数时，将oBtns中的第一个按钮（即ol中的第一个li）的class置为active
                }
                oUl.animate({
                    top:isNow * -150  //使ul整体向上移动，
                }, 500, function(){
                    if(isNow == oBtns.size()){  //判断，若当前显示图片下标为当前按钮个数时，将isNow置为0，将ul的top值置为0
                        isNow = 0;
                        oUl.css("top", "0");
                    }
                })
            }  
        })
    </script>
</head>
<body>
    <div id="play">
        <ol>
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ol>
        <ul>
            <li><a href="*"><img src="./img/1.jpg"/></a></li>
            <li><a href="*"><img src="./img/2.jpg"/></a></li>
            <li><a href="*"><img src="./img/3.jpg"/></a></li>
            <li><a href="*"><img src="./img/4.jpg"/></a></li>
            <li><a href="*"><img src="./img/5.jpg"/></a></li>
            <li><a href="*"><img src="./img/1.jpg"/></a></li>
            <!--将第一张图片，添加到最后一张图片的后面，当最后一张图片动画结束的时候，直接切换回第一张 -->
        </ul>
    </div>
</body>
</html>