JQ banner复习！！

来源：互联网发布：tor网络原理编辑：程序博客网时间：2024/06/14 08:26

在网页编辑中，banner是经常碰到的，这里介绍几种banner，要用到JQUERY.

第一种：直接改背景图片切换的，这种适合width：100%。没有文字说明，可以显示数字，上一页，下一页

<div id="banner">
                <div class="btn">
                 <ul>
                        <li class="hover" dl="1">1</li>
                        <li class="" dl="2">2</li>
                        <li class="" dl="3">3</li>
                        <li class="" dl="4">4</li>
                  </ul>
                        <div style="clear: both"></div>
                </div>

     <div class="next_banner">
             <a href="javascript:next_to()"></a>
       </div>

</div>

CSS 样式：

/*---------------------------------top banner-----------------------------------*/
#banner{width:100%;height:402px;
background:url("../images/top_banner1.gif") top center;position:relative;margin:0px auto; z-index:2;}

.btn{position:absolute;top:385px;left:45%;color:red;/*border-radius:11px;*/}
.btn ul li{float:left;line-height:15px;display:block;margin-left:5px;}
.btn ul li{
        display: block;
        height:5px;
        width:20px;
        background:#dfdfdf;
        text-align:center;
        font-size:5px;color:#dff81b;
        margin-top:10px;
        font-size:0px;
}
.btn ul .hover {display:block;height:20px;width:20px;background:url("../images/fenyetiao_02.gif") no-repeat;filter:alpha(opacity=60 ); -moz-opacity:0.60 ;opacity:0.60 ;
font-size:12px;color:#dff81b;text-align:center;margin-top:0px;}
.next_banner {
    position: absolute;
    top: 42%;
    left: 45%;
    z-index:66;
}
.next_banner a {
       display:block;
       width:32px;
       height:32px;
       background:url(../images/jiantou003.png) no-repeat;
    }

.pre_banner {
    position: absolute;
    top: 42%;
    left: 45%;
    z-index:66;
}
.pre_banner a {
       display:block;
       width:32px;
       height:32px;
       background:url(../images/jiantou003.png) no-repeat;
    }

下面是JQ部分：

/*----------------------------------------------------top banner------------------------------------------*/
        $(document).ready(function () {
            $("#banner .btn li").mouseover(function () {
                clearInterval(timer);
                var cs = $(this).attr("dl");
                $(this).attr("class","hover").siblings().attr("class", "");
                $("#banner").css("background", "url(images/top_banner" + cs + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/

            }).mouseout(function () {
                autoplay();
            });
            $("#banner .next").mouseover(function () {
                clearInterval(timer);
            }).mouseout(function () {
                autoplay();
            });
        })

        var index = 0;
        var timer = null;
        /*3 定时任务*/
        function autoplay() {
            timer = setInterval(function () {
                index++;
                if (index < 4) {
                    $("#banner .btn li").eq(index).attr("class","hover").siblings().attr("class", "");
                    $("#banner").css("background", "url(images/top_banner" + (index + 1) + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
                } else { index = -1; }
            }, 3000);
        }
        autoplay();

        /*---当鼠标滑到#banner盒子上则不会自动切换，离开是则会自动切换*/
        $("#banner .btn li").mouseover(function () {
            clearInterval(timer);
        }).mouseout(function () {
            autoplay();
        });

        function next_to() {
            index++;
            if (index < 4) {

                $("#banner .btn li").eq(index).attr("class","hover").siblings().attr("class", "");
                $("#banner").css("background", "url(images/top_banner" + (index + 1) + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
            } else {

                $("#banner .btn li").eq(0).attr("class", "hover").siblings().attr("class", "");
                $("#banner").css("background", "url(images/top_banner" + 1 + ".gif) top center ").fadeIn("slow");/*----------------实现变换--------------------*/
                index = 0;
            }
        }

这是第一种，变化的道理很简单，就是$("#banner").css("background", "url(images/top_banner" + 1 + ".gif) top center ").fadeIn("slow");

第二种：左右滚动，自动播放，数字显示，还有文字说明的，这种要用到插件。

                                                   <div class="word">jaijfioajofijaiofjoiahfioa</div>
                                                </div>w
                                                <div>
                                                    <img src='images/dongtai_banner2.jpg' alt='' style="margin-top: 1px;" />
                                                    <h4>标题</h4>
                                                   <div class="word">jaijfioajofijaiofjoiahfioa</div>
                                                </div>
                                                <div>
                                                    <img src='images/dongtai_banner3.jpg' alt='' style="margin-top: 1px;" />
                                                       <h4>标题</h4>
                                                    <div class="word">jaijfioajofijaiofjoiahfioa</div>
                                                </div>
                                                <div>
                                                     <img src='images/dongtai_banner4 .jpg' alt='' style="margin-top: 1px;" />
                                                       <h4>标题</h4>
                                                  <div class="word">jaijfioajofijaiofjoiahfioa</div>
                                                </div>
                                            </div>
                                            <a href="#" class="prev">
                                                <img src="images/left_go_01.png" width="24" height="43" alt="上一张" onmouseover="this.src='images/left_go.gif'" onmouseout="this.src='images/left_go_01.png'" />
                                            </a>
                                            <a href="#" class="next">
                                                <img src="images/right_go.gif" width="24" height="43" alt="下一张" onmouseover="this.src='images/right_go_01.png'" onmouseout="this.src='images/right_go.gif'" /></a>
                                        </div>
                                    </div>

                                </div>

css样式控制：

#container {
   width:360px;
   margin:0 auto;
   position:relative;
   z-index:0;
}

#example {
   width:360px;
   height:269px;
   position:relative;
}

#slides {
   position:absolute;
   z-index:20;
}

#slides .next,#slides .prev {
   position:absolute;
   top:107px;
   left:0px;
   width:24px;
   height:43px;
   display:block;
   z-index:101;
}

.slides_container {
   width:360px;
   height:269px;
   overflow:hidden;
   position:relative;
}

#slides .next {
   left:336px;
}
/*--------------数字序号样式的编辑------------------*/
.pagination {
   display:none;
}

.word{

}

JQ部分：

/*-----------------公告通知---------------------*/
            $('#slides').slides({
                preload: true,
                preloadImage: 'images/loading.gif',
                play: 3000,
                pause: 1500,
                hoverPause: true
            });

这种的banner无法适应全屏，一般只用在页面中，不换在顶部。

在介绍一种多图的一种banner：

<div class="nav">
                                <a class="now"></a>
                                <a></a>
                                <a></a>
                            </div>

                        </div>

CSS部分：

#datouwang {
   height: 360px;
   width: 1000px;
   margin:0px auto;
   position: relative;
    top: 0px;
    left: 0px;
}
#datouwang .pre{
   background-image: url(../images/jiantou0011.png);
   background-repeat: no-repeat;
   display: block;
   height: 70px;
   width: 35px;
   cursor:pointer;
   position: absolute;
   left: -26px;
   top: 190px;
    z-index:13;
}
    #datouwang .pre:hover
    {
        background-image: url(../images/jiantou0012_01.gif);
    }
#datouwang .next{
   background-image: url(../images/jiantou0011_01.gif);
   background-repeat: no-repeat;
   display: block;
   height: 70px;
   width: 35px;
   cursor:pointer;
   top: 190px;
   right: -26px;
   position: absolute;
    z-index:13;
   }
    #datouwang .next:hover
    {
        background-image: url(../images/jiantou0012.png);
    }
/*#datouwang a.next:hover{background-position: -25px top;}*/
#datouwang #wai_box {
   height: 360px;
   width: 1000px;
   overflow: hidden;
   position: relative;
    left:-10px;
}

#datouwang .datouwang_box{
    height: 360px;
   width:4000px;     /*----------------------------------很大的宽度------------------------------------------*/
   position: absolute;
   left: 0px;
   top: 40px;
    float:left;
}
#datouwang .datouwang_box a.img:hover{
   -moz-opacity:0.9;
   -khtml-opacity:0.9;
   Opacity:0.9;
   Filter:alpha(opacity=90);
   outline:none;
}
#datouwang .datouwang_box .img{
   display: block;

}
#datouwang .datouwang_box ul {
   float: left;
   height: 360px;
   width: 1000px;
    overflow:auto;
}
/*--单张图片宽度--*/
#datouwang .datouwang_box ul li{width:85px;float:left;margin:15px 0 0px 15px;display:block;text-align:center;
    height: 85px;position:relative; z-index:1;
}
#datouwang .datouwang_box ul li a{display:block;}
#datouwang .datouwang_box ul li img{margin-bottom:3px;}
#datouwang .nav {
    display:none;
   height: 10px;
   margin-top: 20px;
   width:231px;
   margin-right: auto;
   margin-left: auto;
}
#datouwang .nav a {
   background:rgba(100, 100, 100, 0.7);
   display: block;
   float: left;
   height: 10px;
   width: 75px;
   font-size: 0px;
   line-height: 0px;
   margin-right: 2px;
   cursor:pointer;
}
#datouwang .nav a:hover{
   background-color: #F9B766;
}
#datouwang .nav .now{
   background-color: #F9B766;
}

JQ部分：

$(document).ready(function () {

    var page = 0;//初始化当前的版面为1
    var $show = $("#datouwang").find(".datouwang_box");//找到图片展示区域
    var page_count = $show.find("ul").length;
    var $width_box = $show.parents("#wai_box").width();//找到图片展示区域外围的div
    /*-------------------------------------------------------------------------
     //显示title文字
     $show.find("li").hover(function(){
         $(this).find(".title").show();
     },function(){
         $(this).find(".title").hide();
     })
     ------------------------------------------------------------------------------*/
    $("#datouwang").find(".next").click(function () {
        //首先判断展示区域是否处于动画
        if (!$show.is(":animated")) {
            page++;
            if (page >= page_count) page = 0;
            $show.animate({ marginLeft: -($width_box * page) }, "normal");
            $("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
            return false;
        }
    })
    $("#datouwang").find(".pre").click(function () {

        if (!$show.is(":animated")) {
            page--;
            if (page < 0) page = page_count - 1;
            $show.animate({ marginLeft: -($width_box * page) }, "normal");

            $("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
        }
        return false;
    })
    $("#datouwang").find(".nav a").click(function () {
        $index = $(this).index();
        page = $index;
        $show.animate({ marginLeft: -($width_box * $index) }, "normal");
        $(this).addClass("now").siblings("a").removeClass("now");
        return false;
    })
    /*----------------------------滚动动画-----------------------------------*/
    var timer = null;
    function autobo() {
        timer = setInterval(function () {
            //首先判断展示区域是否处于动画
            if (!$show.is(":animated")) {
                page++;
                if (page >= page_count) page = 0;
                $show.animate({ marginLeft: -($width_box * page) }, "normal");
                $("#datouwang").find(".nav a:eq(" + page + ")").addClass("now").siblings("a").removeClass("now");
            }
        }, 3000);
    }
   // autobo();
    //停止计时
    $("#datouwang").find(".pre").hover(function () {
        clearInterval(timer);
    }, function () {
        autobo();
    });
    $("#datouwang").find(".next").hover(function () {
        clearInterval(timer);
    }, function () {
        autobo();
    });

}）；

0 0