jquery广告轮播插件

大家平时在项目中很多时候也用到广告轮播图，我也不例外，为了避免重复工作，自己编写了一个兼容所有浏览器的广告轮播插件，调用非常简单。（ps:可以很灵活的修改，以满足不同的需求）

js代码：

(function($){
    $.fn.ban=function(options){
        var defaults={
            maxClass:"b_max",
            minClass:"b_min",
            maxHeight:"256"
        };
        options=$.extend(defaults,options);

        var maxClass=$("."+options.maxClass);
        var minClass=$("."+options.minClass);
        var max_len=maxClass.find("li").length;
        var picTimer,num=0;

return this.each(function(index){
            $(this).hover(function(){
                clearInterval(picTimer);
            },function(){
                picTimer=setInterval(function(){
                    if(num == max_len) {
                        picMoveFirst();
                        num=0;
                    } else {
                        picMoves(num);
                    }
                    num++;
                },3000);
            }).trigger("mouseleave");

minClass.find("li").each(function(index){
                $(this).bind("click",function(){
                    picMoves(index);
                    num=index;
                });
            });
        });

        function picMoves(index) { //普通切换
             minClass.find("a").removeClass().eq(index).addClass("current");
             maxClass.find("ul").animate({"top":-options.maxHeight*index});
        }
        function picMoveFirst(){
            maxClass.find("ul").append(maxClass.find("li:first").clone());
            maxClass.find("ul").stop(true,false).animate({"top":-options.maxHeight*max_len},300,function(){
                maxClass.find("ul").css("top","0");
                maxClass.find("li:last").remove();
            });
            minClass.find("a").removeClass("current").eq(0).addClass("current");
        }
    }
})(jQuery);

html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>

    <style type="text/css">
        *{padding: 0;margin: 0;}
        ul,ol{list-style: none;}
        img{border: 0 none;vertical-align: middle;}
        .banner{position:relative;width: 760px;height: 256px;background: #87ceeb;}
        .b_max{width: 640px;height: 256px;position: absolute;top: 0;left: 0;z-index: 2;overflow: hidden;}
        .b_max li,.b_max li a,.b_max li a img{width: 640px;height: 256px;}
        .b_max ul{position: absolute;top: 0;left: 0;}
        .b_min{position: absolute;right: 0;top: 0;z-index: 1;background:#000;}
        .b_min ul{width: 160px;}
        .b_min img{opacity:0.65; filter:alpha(Opacity=65);}
        .b_min .current img{opacity: 1;filter:alpha(Opacity=100);}
        .b_min li,.b_min li a,.b_min li a img{width: 160px;height: 64px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.7.min.js"></script>
    <script type="text/javascript" src="js/jquery.ban.js"></script>
    <script type="text/javascript">
        $(function(){
            $("#banner").ban();
        });
    </script>
</head>
<body>

<div id="banner" class="banner">
    <div class="b_max">
        <ul>
            <li><a href="#"><img src="data:images/b1.jpg" alt="" /></a></li>
            <li><a href="#"><img src="data:images/b2.jpg" alt="" /></a></li>
            <li><a href="#"><img src="data:images/b3.jpg" alt="" /></a></li>
            <li><a href="#"><img src="data:images/b4.jpg" alt="" /></a></li>
        </ul>
    </div>
    <div class="b_min">
        <ul>
            <li><a href="javascript:;" class="current"><img src="data:images/b1.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="data:images/b2.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="data:images/b3.jpg" alt="" /></a></li>
            <li><a href="javascript:;"><img src="data:images/b4.jpg" alt="" /></a></li>
        </ul>
    </div>
</div>

</body>
</html>
讲解一下：

var defaults={

maxClass:"b_max",
minClass:"b_min",
maxHeight:"256"
};

这里插件调用时，假如不传出自己定义的参数，插件就默认调用上面的参数，maxClass是轮播大图列表的最外层div的样式，minClass是小图列表的最外层div的样式，maxHeight是每张大图的高度（ps：这里是垂直方向的切）

$(function(){
$("#banner").ban();
});

这个就是默认不传参数时的调用，

假如你自己定义了自己的样式，例如：现在你html里面轮播大图列表的最外层div的样式为ban_max1,小图列表的最外层div的样式为ban_min1,每张大图的高度是200时

插件可以这样很方便的调用；

$(function(){
$("#banner").ban({

maxClass:"ban_max1",
minClass:"ban_min1",
maxHeight:"200"

});
});

当然这里的$("#banner")也可以自定义；希望能对看到的人有所帮助，有不同看法的欢迎交流，可以加qq交流：651680272

转载于:https://www.cnblogs.com/Timac/archive/2012/09/05/2671511.html

jquery广告轮播插件相关推荐

网站项目必备——12款白富美型 jQuery 图片轮播插件
转自:http://www.cnblogs.com/lhb25/archive/2013/01/06/jquery-image-carousel-effect.html 图片轮播是网站中的常用功能,用 ...
html轮播图水平传送带,经典的白富美型jQuery图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
支持响应式手机端jQuery图片轮播插件unslider
支持响应式手机端jQuery图片轮播插件unslider,非常强大的jQuery插件,支持响应式手机端.支持函数回调.支持左右按钮切换,可以自定义是否使用响应式fluid:true/false.是否显 ...
jQuery 图片轮播插件
网站项目必备--12款经典的白富美型 jQuery 图片轮播插件图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 ...
html图片展示插件,12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精 ...
网站项目必备——12款经典的白富美型 jQuery 图片轮播插件
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
html轮播图水平传送带,12款 jquery轮播插件
Nivo Slider 首先推荐的这款插件号称世界上最棒的图片轮播插件,有独立的 jQuery 插件和 WordPress 插件两个版本. 目前下载量已经突破 1,800,000 次!jQuery 独 ...
jQuery百叶窗轮播图插件
下载地址这款jQuery图片轮播插件提供了多种百叶窗风格的图片切换方式,每一种百叶窗风格都是随机产生的.另外这款jQuery多百叶窗风格切换焦点图插件支持悬浮文字描述,同时也支持自动播放.相信它可以 ...

jquery广告轮播插件

jquery广告轮播插件相关推荐

最新文章

热门文章