使用说明  http://www.cnblogs.com/xiaocaiyuxiaoniao/p/8331413.html

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);

responsiveslides.css

@charset “utf-8”;
*{margin:0;padding:0;}
li{list-style-type:none;}

/* rslides */
.rslides{
position:relative;
list-style:none;
overflow:hidden;
width:100%;
padding:0;
margin:0;
}
.rslides li{
-webkit-backface-visibility:hidden;
position:absolute;
display:none;
width:100%;
left:0;
top:0;
}
.rslides li:first-child{
position:relative;
display:block;
float:left;
}
.rslides img{
display:block;
height:auto;
float:left;
width:100%;
border:0;
}
/*pager*/
.callbacks_tabs.callbacks1_tabs{position:absolute;z-index:10; width:94%; bottom:2%; left:50%; margin-left:-47%;}
.callbacks_tabs.callbacks1_tabs li{display:inline-block;width:10px;height:10px;margin-left:5px;border-radius:10px;border:1px solid #FFF;position:relative;}
.callbacks_tabs.callbacks1_tabs li a{display:inline-block;width:10px;height:10px;border-radius:10px;position:absolute; left:0; z-index:1000; color:rgba(100,200,300,0);color:transparent;}
.callbacks_tabs.callbacks1_tabs li.callbacks_here a{background:#FFF;}

/* Callback example */
.callbacks_container{
position:relative;
width:100%;
max-width:100%;
text-align:center;
}
.callbacks{
position:relative;
list-style:none;
overflow:hidden;
width:100%;
padding:0;
margin:0;
}
.callbacks li{
position:absolute;
width:100%;
left:0;
top:0;
}
.callbacks img{
display:block;
position:relative;
z-index:1;
height:auto;
width:100%;
border:0;
}
.callbacks .caption{
display:block;
position:absolute;
z-index:2;
font-size:20px;
text-shadow:none;
color:#fff;
background:#000;
background:rgba(0,0,0, .8);
left:0;
right:0;
bottom:0;
padding:10px 20px;
margin:0;
max-width:none;
}
.callbacks_nav{
position:absolute;
-webkit-tap-highlight-color:rgba(0,0,0,0);
top:50%;
left:0;
opacity:0.6;
z-index:3;
text-indent:-9999px;
overflow:hidden;
text-decoration:none;
height:61px;
width:38px;
background:transparent url(“../images/themes.gif”) no-repeat left top;
margin-top:-30px;
display:none;
}
.callbacks_container:hover .callbacks_nav{display:block;}
.callbacks_nav:active{opacity:1.0;}
.callbacks_nav.next{
left:auto;
background-position:right top;
right:0;
}

@media screen and (max-width:600px){
.callbacks_nav{
top:47%;
}
}

@media (max-width:360px) {
.callbacks_tabs.callbacks1_tabs li{ width:8px; height:8px;}
.callbacks_tabs.callbacks1_tabs li a{ width:8px; height:8px;}
}