[插件封装] 创建一个banner广告栏,点击切换图片

最新推荐文章于 2025-09-17 16:42:16 发布

原创最新推荐文章于 2025-09-17 16:42:16 发布 · 394 阅读

0 ·

CC 4.0 BY-SA版权

JS 同时被 3 个专栏收录

72 篇文章

订阅专栏

Jquery

44 篇文章

订阅专栏

css

37 篇文章

订阅专栏

本文介绍如何利用Bootstarp的官方插件构建一个具备图片切换功能的Banner广告栏，详细阐述了幻灯片的实现过程。

使用Bootstarp官方插件创建一个幻灯片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery移入移出幻灯片效果</title>

    <!--匹配移动端-->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--安装bootstrap-->
    <!--第一步必须先引入:jquery.js,   bootstarp引入之前必须先引入1.9以上版本的jquery,因为bootstarp是简历在jquery基础上的-->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <!--生成占位图-->
    <script src="../../bs/js/holder.js"></script>
    <!--css-->
    <link rel="stylesheet" href="../../bs/css/bootstrap.css">
    <!--bootstrap.js-->
    <script src="../../bs/js/bootstrap.js"></script>

    <style>
        /*把所有的解释内容全部设置为隐藏*/
        .carousel-caption{
            display:none;
        }

        .carousel-caption{
            background: #000;
            opacity: 0.5;
            width:100%;
            position: absolute;
            left:0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="mycarousel" class="carousel slide" data-ride="carousel">


    <!-- 幻灯片图片部分 -->
    <div class="carousel-inner" >
        <div class="item active">
            <a href="https://www.baidu.com"><img src="1.jpg" alt="..."></a>
            <!--幻灯片的标题内容-->
            <div class="carousel-caption">
                <h3>幻灯片标题1</h3>
                <p>幻灯片的解释内容1</p>
            </div>
        </div>
        <div class="item">
            <img src="2.jpg" alt="...">
            <!--幻灯片的标题内容-->
            <div class="carousel-caption">
                <h3>幻灯片标题2</h3>
                <p>幻灯片的解释内容2</p>
            </div>
        </div>
        <div class="item">
            <img src="3.jpg" alt="...">
            <!--幻灯片的标题内容-->
            <div class="carousel-caption">
                <h3>幻灯片标题3</h3>
                <p>幻灯片的解释内容3</p>
            </div>
        </div>
        <div class="item">
            <img src="4.jpg" alt="...">
            <!--幻灯片的标题内容-->
            <div class="carousel-caption">
                <h3>幻灯片标题4</h3>
                <p>幻灯片的解释内容4</p>
            </div>
        </div>
        <div class="item">
            <img src="5.jpg" alt="...">
            <!--幻灯片的标题内容-->
            <div class="carousel-caption">
                <h3>幻灯片标题5</h3>
                <p>幻灯片的解释内容5</p>
            </div>
        </div>

    </div>

    <!-- 指示灯按钮 -->
    <!--<ol class="carousel-indicators">
        <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
        <li data-target="#mycarousel" data-slide-to="1"></li>
        <li data-target="#mycarousel" data-slide-to="2"></li>
        <li data-target="#mycarousel" data-slide-to="3"></li>
        <li data-target="#mycarousel" data-slide-to="4"></li>
    </ol>-->

    <!-- 左右按钮 -->
    <a class="left carousel-control" href="#mycarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#mycarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<script>
    //图片一旦hover,就去找到他里边的一个类名为carousel-caption的元素,为他设置显示状态
    $(".item").hover(
        function(){
            $(this).find(".carousel-caption").slideDown();
        },
        function(){
            $(this).find(".carousel-caption").slideUp();
        }
    );
</script>
</body>
</html>


使用Jquery自定义实现广告栏效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>banner广告栏效果</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="jquery.slider.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #shang{
            width: 100%;
            height: 500px;
            background:red;
            text-align: center;
        }

        /*这里是外层的包裹,主要作用限制img的显示范围*/
        #shang #imgdiv{
            width: 1920px;
            height:500px;
            position:absolute;
            left:50%;
            overflow: hidden;
            margin-left:-960px;
        }
        /*这里是内层包裹.主要作用承载img图片,使得img排成一列,并根据点击做出特效*/
        #shang #imgdiv #aa{
            width: 9600px;
            /*background: blue;*/
        }
        #aa img{
            float: left;
        }
        #xia{
            width:300px;
            height: 40px;
            margin:0 auto;
            position: absolute;
            top: 440px;
            left:50%;
            margin-left: -150px;
            z-index:1;
        }
        #xia li{
            width: 52px;
            height: 40px;
            margin:0;
            padding:0;
            float: left;
            list-style:none;
        }
        #xia li p{
            width:13px;
            height:13px;
            border: 2px solid black;
            border-radius:20px;
            /*background: blue;*/
            position: relative;
            top: 10px;
            transition:border 0.5s,height 0.5s,width 0.5s;
        }
        #xia li p:hover{
            border:2px solid yellow;
            width:15px;
            height: 15px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="shang">
        <div id="xia">
            <ul>
                <li><p style="border: 2px solid yellow;"></p></li>
                <li><p></p></li>
                <li><p></p></li>
                <li><p></p></li>
                <li><p></p></li>
            </ul>
        </div>
        <div id="imgdiv">
            <div id="aa">
                <img src="1.jpg" alt="">
                <img src="2.jpg" alt="">
                <img src="3.jpg" alt="">
                <img src="4.jpg" alt="">
                <img src="5.jpg" alt="">
            </div>
        </div>

    </div>


</div>
</body>
<script>
//    给li按钮添加点击事件
    $(" #xia li").click(function(){
        //当li元素点击的时候,把li按钮的索引拿到
        val = $(this).index();
        i = val;    //当li点击的时候,就把全局变量计数器变为点击的元素的索引
        //给img图片的外包裹添加一个自定义动画,每点击一次就让他的margin-left值变化 索引值 * 1920,在一秒内完成
        $("#aa").animate({
            "margin-left":val*-1920+"px"
        },500);
        $(" #xia li p").eq(val).css({"border":"2px solid yellow"})
        $(" #xia li p").not($(" #xia li p").eq(val)).css({"border":"2px solid black"})

    });


    //定时器,2秒执行一次
    setInterval(sss,2000);
    //全局变量,用于表示当前出现的图片的索引
    i = 0;
    function sss(){
        $("#aa").animate({
            "margin-left":i*-1920+"px"
        },500);
        panduan();
        $(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
        $(" #xia li p").not($(" #xia li p").eq(i-1)).css({"border":"2px solid black"})
    }

    function panduan(){
        i++;
        if(i >= 5){
            i = 0;
        }
    }
</script>
</html>

使用JS用根据索引定时渐隐的方式显示和隐藏重叠的图片,可以添加任何数量的图片来进行滚动,不用考虑图片前后位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>渐隐式幻灯片</title>
    <!--引入:jquery.js -->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <style>
        .cantainer{
            width:1400px;
            height: 350px;
            /*background:red;*/
            margin: 0 auto;

        }

        .window{
            width:100%;
            height: 100%;
            /*overflow: hidden;*/
            position: relative;

        }
        .window img{
            width:100%;
            height: 100%;
            display: none;
            position: absolute;
            top:0;
            left:0;
        }
        

    </style>
</head>
<body>
    <div class="cantainer">
        <h1>渐隐式幻灯片</h1>

        <div class="window">
            <img src="1.jpg" alt="">
            <img src="2.jpg" alt="">
        </div>
    </div>
</body>

<script>
    /* 使用变量计数的方式做到变换,这样写是根据索引来变换,只要有两张以上的都可以进行变换,不需要调换位置*/

    i = 0;
    $("img").eq(i).show();

    setInterval(function(){
        // i变量为索引的那张图隐藏
        $("img").eq(i).fadeOut(1000);       //隐藏

        //括号里是判断变量i是否等于最后一张图片的索引,如果等于,就把变量设置为0,然后显示变量为0的那张图,否则就显示i变量的下一张
        if(i == ($("img").length-1)){
            i = 0;
            $("img").eq(i).fadeIn(1000);      //显示
        }else{
            $("img").eq(i+1).fadeIn(1000);    //显示
            i++;
        }
    },2000)
</script>
</html>

使用Jquery中的函数,PrePendTo 把显示接收后的元素调换位置到所有图片末尾,等待新一轮显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery追加完成渐隐式幻灯片</title>
    <!--引入:jquery.js -->
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <style>
        .cantainer{
            width:1400px;
            height: 350px;
            /*background:red;*/
            margin: 0 auto;

        }

        .window{
            width:100%;
            height: 100%;
            overflow: hidden;
            position: relative;

        }
        .window img{
            width:100%;
            height: 100%;
            position: absolute;
            top:0;
            left:0;
        }


    </style>
</head>
<body>
<div class="cantainer">
    <h1>渐隐式幻灯片</h1>

    <div class="window">

        <!--倒置目的是为了使1图片先显示出来-->
        <img src="5.jpg" alt="">
        <img src="4.jpg" alt="">
        <img src="3.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="1.jpg" alt="">
    </div>
</div>
</body>

<script>
    /* 使用jqeury追加函数来完成幻灯片,原理是所有的图片原版都是显示出来的,最上边的哪一个指定时间内隐藏,因为隐藏后这个元素的display属性会变为none,所以为了让他下一次仍然显示,隐藏完之后会调用一个函数,使得当前元素调换位置到window内所有元素的最前面*/
    setInterval(function(){
        imgs = $(".window img")
        imgs.eq($("img").size()-1).fadeOut(function(){
            //这里运用了Jquery中的函数,即把当前元素追加到window内部第一个
            $(this).show().prependTo(".window");
        });
    },1000)
</script>
</html>

自定义可以链接最前面一个的幻灯片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚动的幻灯片首位衔接</title>
    <!--百度在线压缩地址-->
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script src="jquery.slider.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #shang{
            width: 100%;
            height: 500px;
            /*background:red;*/
            text-align: center;
        }

        /*这里是外层的包裹,主要作用限制img的显示范围*/
        #shang #imgdiv{
            width: 1920px;
            height:500px;
            position:absolute;
            left:50%;
            /*overflow: hidden;*/
            margin-left:-960px;
        }
        /*这里是内层包裹.主要作用承载img图片,使得img排成一列,并根据点击做出特效*/
        #shang #imgdiv #aa{
            width: 15000px;
            /*background: blue;*/
        }
        #aa img{
            float: left;
        }
        #xia{
            width:300px;
            height: 40px;
            margin:0 auto;
            position: absolute;
            top: 440px;
            left:50%;
            margin-left: -150px;
            z-index:1;
        }
        #xia li{
            width: 52px;
            height: 40px;
            margin:0;
            padding:0;
            float: left;
            list-style:none;
        }
        #xia li p{
            width:13px;
            height:13px;
            border: 2px solid black;
            border-radius:20px;
            /*background: blue;*/
            position: relative;
            top: 10px;
            transition:border 0.5s,height 0.5s,width 0.5s;
        }
        #xia li p:hover{
            border:2px solid yellow;
            width:15px;
            height: 15px;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="shang">
        <div id="xia">
            <ul>
                <li><p style="border: 2px solid yellow;"></p></li>
                <li><p></p></li>
                <li><p></p></li>
                <li><p></p></li>
                <li><p></p></li>
            </ul>
        </div>
        <div id="imgdiv">
            <div id="aa">
                <img src="1.jpg" alt="">
                <img src="2.jpg" alt="">
                <img src="3.jpg" alt="">
                <img src="4.jpg" alt="">
                <img src="5.jpg" alt="">
                <img src="1.jpg" alt="">
            </div>
        </div>

    </div>


</div>
</body>
<script>

    //    给li按钮添加点击事件
    $(" #xia li").click(function(){
        //当li元素点击的时候,把li按钮的索引拿到
        val = $(this).index();
        i = val;    //当li点击的时候,就把全局变量计数器变为点击的元素的索引
        //给img图片的外包裹添加一个自定义动画,每点击一次就让他的margin-left值变化 索引值 * 1920,在一秒内完成
        $("#aa").animate({
            "margin-left":val*-1920+"px"
        },500);
        $(" #xia li p").eq(val).css({"border":"2px solid yellow"})
        $(" #xia li p").not($(" #xia li p").eq(val)).css({"border":"2px solid black"})
    });


    //定时器,2秒执行一次
    kai = setInterval(sss,2000);
    //全局变量,用于表示当前出现的图片的索引
    i = 0;

    function sss(){
        //执行动画500秒内把元素的margin
        $("#aa").animate({
            "margin-left":i*-1920+"px"
        },500);
        panduan();
        $(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
        $(" #xia li p").not($(" #xia li p").eq(i-1)).css({"border":"2px solid black"})
    }

    function panduan(){
        if(i >= $("img").size()-1){     //当 i 大于等于最后一个索引的时候
            as();
        }else{
            i++;
        }
    }

    function as(){
        //执行到这里的时候黄色圆圈已经回到第一个了,这是在瞬间完成的
        $(" #xia li p").eq(i-1).css({"border":"2px solid yellow"})
        //执行到这里的时候把图片整个外部包裹的margin-left设置为0,使其可以在下一个定时器运行的时候直接转到第二个,这里不能用CSS直接设置,因为CSS会卡掉中间的动画
        $("#aa").animate({
            "margin-left":0+"px"
        },1);
        //这里的i变为1是为下一次出现第二张图片做准备,由于最后一张和第一张一样,在最后的时候已经展示过了,所以不再次做展示
        i = 1;                      //判断变为1

    }

</script>
</html>