responsiveSlides 封装好的轮播插件 直接调用

先引入  responsiveslides.min.js  插件

/*! http://responsiveslides.com v1.54 by @viljamis */
(function (c, I, B) {
    c.fn.responsiveSlides = function (l) {
        var a = c.extend({
            auto: !0,
            speed: 500,
            timeout: 4E3,
            pager: !1,
            nav: !1,
            random: !1,
            pause: !1,
            pauseControls: !0,
            prevText: "Previous",
            nextText: "Next",
            max "",
            navContainer: "",
            manualControls: "",
            namespace: "rslides",
            before: c.noop,
            after: c.noop
        }, l);
        return this.each(function () {
            B++;
            var f = c(this), s, r, t, m, p, q, n = 0, e = f.children(), C = e.size(), h = parseFloat(a.speed), D = parseFloat(a.timeout), u = parseFloat(a.maxwidth), g = a.namespace, d = g + B, E = g + "_nav " + d + "_nav", v = g + "_here", j = d + "_on",
                w = d + "_s", k = c("<ul class='" + g + "_tabs " + d + "_tabs' />"), x = {
                    "float": "left",
                    position: "relative",
                    opacity: 1,
                    zIndex: 2
                }, y = {"float": "none", position: "absolute", opacity: 0, zIndex: 1}, F = function () {
                    var b = (document.body || document.documentElement).style, a = "transition";
                    if ("string" === typeof b[a])return !0;
                    s = ["Moz", "Webkit", "Khtml", "O", "ms"];
                    var a = a.charAt(0).toUpperCase() + a.substr(1), c;
                    for (c = 0; c < s.length; c++)if ("string" === typeof b[s[c] + a])return !0;
                    return !1
                }(), z = function (b) {
                    a.before(b);
                    F ? (e.removeClass(j).css(y).eq(b).addClass(j).css(x),
                        n = b, setTimeout(function () {
                        a.after(b)
                    }, h)) : e.stop().fadeOut(h, function () {
                        c(this).removeClass(j).css(y).css("opacity", 1)
                    }).eq(b).fadeIn(h, function () {
                        c(this).addClass(j).css(x);
                        a.after(b);
                        n = b
                    })
                };
            a.random && (e.sort(function () {
                return Math.round(Math.random()) - 0.5
            }), f.empty().append(e));
            e.each(function (a) {
                this.id = w + a
            });
            f.addClass(g + " " + d);
            l && l.maxwidth && f.css("max-width", u);
            e.hide().css(y).eq(0).addClass(j).css(x).show();
            F && e.show().css({
                "-webkit-transition": "opacity " + h + "ms ease-in-out",
                "-moz-transition": "opacity " +
                h + "ms ease-in-out",
                "-o-transition": "opacity " + h + "ms ease-in-out",
                transition: "opacity " + h + "ms ease-in-out"
            });
            if (1 < e.size()) {
                if (D < h + 100)return;
                if (a.pager && !a.manualControls) {
                    var A = [];
                    e.each(function (a) {
                        a += 1;
                        A += "<li><a href='#' class='" + w + a + "'>" + a + "</a></li>"
                    });
                    k.append(A);
                    l.navContainer ? c(a.navContainer).append(k) : f.after(k)
                }
                a.manualControls && (k = c(a.manualControls), k.addClass(g + "_tabs " + d + "_tabs"));
                (a.pager || a.manualControls) && k.find("li").each(function (a) {
                    c(this).addClass(w + (a + 1))
                });
                if (a.pager || a.manualControls)q =
                    k.find("a"), r = function (a) {
                    q.closest("li").removeClass(v).eq(a).addClass(v)
                };
                a.auto && (t = function () {
                    p = setInterval(function () {
                        e.stop(!0, !0);
                        var b = n + 1 < C ? n + 1 : 0;
                        (a.pager || a.manualControls) && r(b);
                        z(b)
                    }, D)
                }, t());
                m = function () {
                    a.auto && (clearInterval(p), t())
                };
                a.pause && f.hover(function () {
                    clearInterval(p)
                }, function () {
                    m()
                });
                if (a.pager || a.manualControls)q.bind("click", function (b) {
                    b.preventDefault();
                    a.pauseControls || m();
                    b = q.index(this);
                    n === b || c("." + j).queue("fx").length || (r(b), z(b))
                }).eq(0).closest("li").addClass(v),
                a.pauseControls && q.hover(function () {
                    clearInterval(p)
                }, function () {
                    m()
                });
                if (a.nav) {
                    g = "<a href='#' class='" + E + " prev'>" + a.prevText + "</a><a href='#' class='" + E + " next'>" + a.nextText + "</a>";
                    l.navContainer ? c(a.navContainer).append(g) : f.after(g);
                    var d = c("." + d + "_nav"), G = d.filter(".prev");
                    d.bind("click", function (b) {
                        b.preventDefault();
                        b = c("." + j);
                        if (!b.queue("fx").length) {
                            var d = e.index(b);
                            b = d - 1;
                            d = d + 1 < C ? n + 1 : 0;
                            z(c(this)[0] === G[0] ? b : d);
                            if (a.pager || a.manualControls)r(c(this)[0] === G[0] ? b : d);
                            a.pauseControls || m()
                        }
                    });
                    a.pauseControls && d.hover(function () {
                        clearInterval(p)
                    }, function () {
                        m()
                    })
                }
            }
            if ("undefined" === typeof document.body.style.maxWidth && l.maxwidth) {
                var H = function () {
                    f.css("width", "100%");
                    f.width() > u && f.css("width", u)
                };
                H();
                c(I).bind("resize", function () {
                    H()
                })
            }
        })
    }
})(jQuery, this, 0);

2、再调用里面封装好的方法

$(function() {
    $(".f426x240").responsiveSlides({
        auto: true,
        speed: 700,
        timeout: 4000,//控制轮播切换的速度
        pager: true,//鼠标移入后停止切换
        nav: true,
        pause: true
    });
});

HTML

<div class="new_banner">
            <ul class="rslides f426x240">
                <li>
                    <a href="javascript:">
                        <!--lunbo 1 -->
                        <div class="z_carousel">
                            <ul class="clearfix">
                                <li>
                                    <img src="./static/images/z_carousel_list1.png" alt="森林寻宝"/>
                                    <p>森林寻宝——Steven C. Hayes的 <br/> 接纳承诺疗法。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list2.png" alt="02价值花园"/>
                                    <p style="line-height: 44px;">价值花园——价值观澄清。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list3.png" alt="03星光闪闪"/>
                                    <p>星光闪闪——Peterson、Seligman<br/>六大核心美德和二十四人格优势。</p>
                                </li>
                                <li style="margin-right: 0;">
                                    <img src="./static/images/z_carousel_list4.png" alt="04乐观银行"/>
                                    <p style="line-height: 44px;">乐观银行——正性错觉。</p>
                                </li>
                            </ul>
                            <ul class="clearfix" style="margin-top: 45px;">
                                <li>
                                    <img src="./static/images/z_carousel_list5.png" alt="幸福攀岩"/>
                                    <p style="line-height: 44px;">幸福攀岩——主观幸福感。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list6.png" alt="06开心回家"/>
                                    <p style="line-height: 44px;">开心回家——韦纳的归因理论。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list7.png" alt="07快乐保龄球"/>
                                    <p style="line-height: 44px;">快乐保龄球——心理弹性的相关研究。</p>
                                </li>
                                <li style="margin-right: 0;">
                                    <img src="./static/images/z_carousel_list8.png" alt="08安全树"/>
                                    <p style="line-height: 44px;">安全树——整合国内外对儿童虐待<br/>的研究成果。</p>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:">
                        <!--lunbo 2 -->
                        <div class="z_carousel">
                            <ul class="clearfix">
                                <li>
                                    <img src="./static/images/z_carousel_list9.png" alt="01共创家园"/>
                                    <p>共创家园——马斯洛需求层次理论<br/>和舒茨的人际需要三维理论。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list10.png" alt="02三个火枪手-"/>
                                    <p style="line-height: 44px;">三个火枪手——Salmivalli（萨尔米<br/>瓦利）的参与者角色理论。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list11.png" alt="03愤怒探测器"/>
                                    <p>星光闪闪——Peterson、Seligman<br/>愤怒探测器——情绪的正念管理方法。</p>
                                </li>
                                <li style="margin-right: 0;">
                                    <img src="./static/images/z_carousel_list12.png" alt="04情绪越野兔"/>
                                    <p style="line-height: 44px;">情绪越野兔——保罗·艾克曼的情绪研究成果。</p>
                                </li>
                            </ul>
                            <ul class="clearfix" style="margin-top: 45px;">
                                <li>
                                    <img src="./static/images/z_carousel_list13.png" alt="05机-智-小-人"/>
                                    <p style="line-height: 44px;">机智小人——发散思维的相关研究。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list14.png" alt="06智取七龙珠"/>
                                    <p style="line-height: 44px;">智取七龙珠—美国教育管理者罗伯特•艾<br/>伯尔提出的SCAMPER综合性思维策略。</p>
                                </li>
                                <li>
                                    <img src="./static/images/z_carousel_list15.png" alt="07勇闯汤屋"/>
                                    <p style="line-height: 44px;">勇闯汤屋——思维定势现象。</p>
                                </li>
                                <li style="margin-right: 0;">
                                    <img src="./static/images/z_carousel_list16.png" alt="08多面体"/>
                                    <p style="line-height: 44px;">多面体——Joseph Luft和Harry <br/>Ingham的资讯窗理论。</p>
                                </li>
                            </ul>
                        </div>
                    </a>
                </li>
            </ul>
        </div>

CSS

/*==lunbo advantage2==*/
.new_banner{position:relative; margin:0 auto; }
.rslides{width:100%;position:relative;list-style:none;padding:0}
.rslides_nav{ width:36px; height:36px; display:block; position:absolute;  text-indent:-10em; overflow:hidden;}

.prev{ background-position:0 0;left:-40px; top:180px;}
.prev:hover{ background-position:0 -36px;}
.next{ background-position:-36px 0;right:-40px; top:180px;}
.next:hover{ background-position:-36px -36px;}
.rslides_tabs{ position:absolute; left:546px; top:690px;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:15px; height:15px; background:#cccccc;text-indent:-5em; overflow:hidden; display:block; float:left; margin-left:26px;border-radius:10px;}
.rslides_tabs .rslides_here a{ background:#58cdfd;}