懒人图库新版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=gb2312" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="jQuery焦点图" />
<title>jQuery焦点图</title>
<link rel="stylesheet" type="text/css" href="css/xixi.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>

<body><center><br />
<!-- 代码 开始 -->
<div class="focus">
    <ul class="rslides f426x240">
        <li><a href="#/" target="_blank"><img src="images/01.jpg" alt="代码" /></a></li>
        <li><a href="#/js/" target="_blank"><img src="images/02.jpg" alt="JS代码" /></a></li>
        <li><a href="#/zt/book/" target="_blank"><img src="images/03.jpg" alt="读。书。" /></a></li>
        <li><a href="#/bg/" target="_blank"><img src="images/04.jpg" alt="网页背景" /></a></li>
        <li><a href="#" target="_blank"><img src="images/05.jpg" alt="折页网" /></a></li>
    </ul>
</div>
</center>
</body>
</html>

JS代码(lrtk.js):

// ����ͼ�� �Ѽ����� www.lanrentuku.com(function(d,D,v){
	d.fn.responsiveSlides=function(h){
	var b=d.extend({
	auto:!0,speed:1E3,timeout:7E3,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='#' class='"+y+" prev'>"+b.prevText+"</a><a href='#' 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,maxwidth:426}
);
}
);

CSS代码(xixi.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{padding:0;margin:0}
body{font-family:verdana,arial,tahoma;font-size:12px;color:#333}
img{border:0}
/* ����ͼ */
.focus{width:426px;height:240px;border:1px solid #EEE;position:relative;margin-top:6px;float:center}
.f426x240{width:426px;height:240px;overflow:hidden}
.f426x240 img{width:426px;height:240px}
.rslides{width:100%;position:relative;list-style:none;padding:0}
.rslides_nav{height:51px;width:31px;position:absolute;-webkit-tap-highlight-color:rgba(0,0,0,0);top:50%;left:0;opacity:0.5;text-indent:-9999px;overflow:hidden;text-decoration:none;background:url(../images/i.png) no-repeat 0 -560px;margin-top:-28px}
.rslides_nav:active{opacity:1.0}
.rslides_nav.next{left:auto;background-position:-31px -560px;right:0}
.rslides_tabs{margin:12px auto;clear:both;text-align:center}
.rslides_tabs li{display:inline;float:none;_float:left;*float:left;margin-right:5px}
.rslides_tabs a{text-indent:-9999px;overflow:hidden;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;background:rgba(0,0,0,.2);background:#DDD;display:inline-block;_display:block;*display:block;width:9px;height:9px}
.rslides_tabs .rslides_here a{background:rgba(0,0,0,.6);background:#390}

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