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", maxwidth: "", 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;}
