jQuery网站首页图片轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网站首页图片轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ResponsiveSlides响应式jQuery幻灯</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/responsiveslides.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/responsiveslides.min.js"></script>
<script type="text/javascript">
// You can also use "$(window).load(function() {"
$(function () {

  // Slideshow 4
  $("#slider4").responsiveSlides({
	auto: false,
	pager: false,
	nav: true,
	speed: 500,
	namespace: "callbacks",
	before: function () {
	  $('.events').append("<li>before event fired.</li>");
	},
	after: function () {
	  $('.events').append("<li>after event fired.</li>");
	}
  });

});
</script>

</head>
<body>

<div id="wrapper">
	<div class="callbacks_container">
		<ul class="rslides" id="slider4">
			<li>
				<img src="images/1.jpg" alt="">
				<p class="caption">标题一</p>
			</li>
			<li>
				<img src="images/2.jpg" alt="">
				<p class="caption">标题二</p>
			</li>
			<li>
				<img src="images/3.jpg" alt="">
				<p class="caption">标题三</p>
			</li>
		</ul>
	</div>
</div>
</body>
</html>

JS代码(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);

CSS代码(style.css):

*{margin:0;padding:0;}
html{background:#222 url("bg.png") repeat;}
body{_width:70%;color:#888;font:14px/20px Helvetica,Arial,sans-serif;margin:20px auto 0;max-width:800px;text-align:center;text-shadow:0 -2px 1px #000;-webkit-font-smoothing:antialiased;}
p{text-align:left;max-width:540px;margin:0 auto 20px;}
a{color:#fff;text-decoration:none;}
#wrapper{padding:20px;}
.rslides{margin:0 auto 40px;}
#slider2,#slider3{box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin:0 auto;}
.rslides_tabs{list-style:none;padding:0;background:rgba(0,0,0,.25);box-shadow:0 0 1px rgba(255,255,255,.3),inset 0 0 5px rgba(0,0,0,1.0);-moz-box-shadow:0 0 1px rgba(255,255,255,.3),inset 0 0 5px rgba(0,0,0,1.0);-webkit-box-shadow:0 0 1px rgba(255,255,255,.3),inset 0 0 5px rgba(0,0,0,1.0);font-size:18px;list-style:none;margin:0 auto 50px;max-width:540px;padding:10px 0;text-align:center;width:100%;}
.rslides_tabs li{display:inline;float:none;margin-right:1px;}
.rslides_tabs a{width:auto;line-height:20px;padding:9px 20px;height:auto;background:transparent;display:inline;}
.rslides_tabs li:first-child{margin-left:0;}
.rslides_tabs .rslides_here a{background:rgba(255,255,255,.1);color:#fff;font-weight:bold;}
/* Callback example */
.events{list-style:none;}
.callbacks_container{margin-bottom:50px;position:relative;float:left;width:100%;}
.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:52%;left:0;opacity:0.7;z-index:3;text-indent:-9999px;overflow:hidden;text-decoration:none;height:61px;width:38px;background:transparent url("themes.gif") no-repeat left top;margin-top:-45px;}
.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%;}
}

附件:下载该文件资源,减少时间成本(增值服务)