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

最新推荐文章于 2021-03-13 11:15:07 发布

一个平平无奇的小高

最新推荐文章于 2021-03-13 11:15:07 发布

阅读量215

点赞数 3

分类专栏： JQuery 文章标签： html css javascript web jquery

本文链接：https://blog.csdn.net/qq_44646343/article/details/108081064

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

学完了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>

🐖：文章是供自己平时学习时用，相当于学习笔记，如有错误，欢迎指正~~

一个平平无奇的小高

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
学完了JQuery，还不会写banner图？（含完整源码）

学完了JQuery，还不会写banner图？恐怕不太好鸭~~JQuery实现banner图先来看看最终效果：我们先来看一下整体的布局：<body> <div id="play"> <ol> <li class="active">1</li> &lt
复制链接

扫一扫