jquery简洁版的banner图轮播

最近写了好多个公司官网,然后首页基本上用到了banner图轮播,上网找了好多相关的插件,有利有弊,最后选了一个简洁的,代码的可造性强的模板,加上一些改编,代码附上

先将效果图附上:(底部的图形可根据实际情况进行修改)




在html页面中:(只需要如下几行代码即可)

<div class="new_banner">
    <ul class="rslides f426x240">
        <li><a href="javascript:"><img src="images/img1.jpg" /></a></li>
        <li><a href="javascript:"><img src="images/img2.jpg"  /></a></li>
        <li><a href="javascript:"><img src="images/img3.jpg"  /></a></li>
        <li><a href="javascript:"><img src="images/img4.jpg" /></a></li>
    </ul>
</div>

css样式:

.new_banner{width:100%;height:auto;position:relative; margin:0 auto; background:url(../images/loading.gif) no-repeat center center ;overflow: hidden;}
.rslides li{width: 100%;height: auto;}
.rslides li a{display: block;width: 100%;height: auto;}
.new_banner img{width: 100%;height:auto;overflow: hidden;}
.rslides{width:100%;position:relative;list-style:none;padding:0;}
.rslides_nav{ width:36px; height:36px;  background-image:url(../images/banner_new1.png);background-size:74px auto;display:block; position:absolute;  text-indent:-10em; overflow:hidden;}
.prev{ background-position:0 0;left:20px; top:45%;}
.next{ background-position:-37.5px 0;right:20px; top:45%;}
.rslides_tabs{ position:absolute; left:40%; top:90%;clear:both;text-align:center; z-index:99999;}
.rslides_tabs li{display:inline;float:none;_float:left;*float:left;margin-right:5px}
.rslides_tabs a{ width:40px; height:3px; background:#cccccc;text-indent:-5em; overflow:hidden; display:block; float:left; margin-left:6px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;}
.rslides_tabs .rslides_here a{ background:#fed953;}


js:

(function (d, D, v) {
    d.fn.responsiveSlides = function (h) {
        var b = d.extend({
            auto: !0,
            speed: 1E3,
            timeout: 3E3,
            pager: !1,
            nav: !1,
            random: !1,
            pause: !1,
            pauseControls: !1,
            prevText: "Previous",
            nextText: "Next",
            maxwidth: "",
            controls: "",
            namespace: "rslides",
            before: function () {},
            after: function () {}
        }, h);
        return this.each(function () {
            v++;
            var e = d(this),
                n, p, i, k, l, m = 0,
                f = e.children(),
                w = f.size(),
                q = parseFloat(b.speed),
                x = parseFloat(b.timeout),
                r = parseFloat(b.maxwidth),
                c = b.namespace,
                g = c + v,
                y = c + "_nav " + g + "_nav",
                s = c + "_here",
                j = g + "_on",
                z = g + "_s",
                o = d("<ul class='" + c + "_tabs " + g + "_tabs' />"),
                A = {
                    "float": "left",
                    position: "relative"
                },
                E = {
                    "float": "none",
                    position: "absolute"
                },
                t = function (a) {
                    b.before();
                    f.stop().fadeOut(q, function () {
                        d(this).removeClass(j).css(E)
                    }).eq(a).fadeIn(q, function () {
                        d(this).addClass(j).css(A);
                        b.after();
                        m = a
                    })
                };
            b.random && (f.sort(function () {
                return Math.round(Math.random()) - 0.5
            }), e.empty().append(f));
            f.each(function (a) {
                this.id = z + a
            });
            e.addClass(c + " " + g);
            h && h.maxwidth && e.css("max-width", r);
            f.hide().eq(0).addClass(j).css(A).show();
            if (1 <
                f.size()) {
                if (x < q + 100) return;
                if (b.pager) {
                    var u = [];
                    f.each(function (a) {
                        a = a + 1;
                        u = u + ("<li><a href='#' class='" + z + a + "'>" + a + "</a></li>")
                    });
                    o.append(u);
                    l = o.find("a");
                    h.controls ? d(b.controls).append(o) : e.after(o);
                    n = function (a) {
                        l.closest("li").removeClass(s).eq(a).addClass(s)
                    }
                }
                b.auto && (p = function () {
                    k = setInterval(function () {
                        var a = m + 1 < w ? m + 1 : 0;
                        b.pager && n(a);
                        t(a)
                    }, x)
                }, p());
                i = function () {
                    if (b.auto) {
                        clearInterval(k);
                        p()
                    }
                };
                b.pause && e.hover(function () {
                    clearInterval(k)
                }, function () {
                    i()
                });
                b.pager && (l.bind("click", function (a) {
                    a.preventDefault();
                    b.pauseControls || i();
                    a = l.index(this);
                    if (!(m === a || d("." + j + ":animated").length)) {
                        n(a);
                        t(a)
                    }
                }).eq(0).closest("li").addClass(s), b.pauseControls && l.hover(function () {
                    clearInterval(k)
                }, function () {
                    i()
                }));
                if (b.nav) {
                    c = "<a href='javascript:' class='" + y + " prev'>" + b.prevText + "</a><a href='javascript:' class='" + y + " next'>" + b.nextText + "</a>";
                    h.controls ? d(b.controls).append(c) : e.after(c);
                    var c = d("." + g + "_nav"),
                        B = d("." + g + "_nav.prev");
                    c.bind("click", function (a) {
                        a.preventDefault();
                        if (!d("." + j + ":animated").length) {
                            var c = f.index(d("." + j)),
                                a = c - 1,
                                c = c + 1 < w ? m + 1 : 0;
                            t(d(this)[0] === B[0] ? a : c);
                            b.pager && n(d(this)[0] === B[0] ? a : c);
                            b.pauseControls || i()
                        }
                    });
                    b.pauseControls && c.hover(function () {
                        clearInterval(k)
                    }, function () {
                        i()
                    })
                }
            }
            if ("undefined" === typeof document.body.style.maxWidth && h.maxwidth) {
                var C = function () {
                    e.css("width", "100%");
                    e.width() > r && e.css("width", r)
                };
                C();
                d(D).bind("resize", function () {
                    C()
                })
            }
        })
    }
})(jQuery, this, 0);
$(function() {
    $(".f426x240").responsiveSlides({
        auto: true,
        pager: true,
        nav: true,
        speed: 700
    });
    $(".f160x160").responsiveSlides({
        auto: true,
        pager: true,
        speed: 700
    });
});



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值