最近写了好多个公司官网,然后首页基本上用到了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
});
});