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" href="css/lrtk.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/lrtk.js"></script>
</head>
<body><br />
<!-- 代码 开始 -->
<div id="header">
  <div class="wrap">
   <div id="slide-holder">
		<div id="slide-runner">
			<a href="#" target="_blank"><img id="slide-img-1" src="images/a1.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-2" src="images/a2.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-3" src="images/a3.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-4" src="images/a4.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-5" src="images/a5.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-6" src="images/a6.jpg" class="slide" alt="" /></a>
			<a href="#" target="_blank"><img id="slide-img-7" src="images/a4.jpg" class="slide" alt="" /></a> 
			<div id="slide-controls">
			 <p id="slide-client" class="text"><strong></strong><span></span></p>
			 <p id="slide-desc" class="text"></p>
			 <p id="slide-nav"></p>
			</div>
		</div>
   </div>
   <script type="text/javascript">
    if(!window.slider) {
		var slider={};
	}

	slider.data= [
    {
        "id":"slide-img-1", // 与slide-runner中的img标签id对应
        "client":"标题1",
        "desc":"这里修改描述 这里修改描述 这里修改描述" //这里修改描述
    },
    {
        "id":"slide-img-2",
        "client":"标题2",
        "desc":"add your description here"
    },
    {
        "id":"slide-img-3",
        "client":"标题3",
        "desc":"add your description here"
    },
    {
        "id":"slide-img-4",
        "client":"标题4",
        "desc":"add your description here"
    },
    {
        "id":"slide-img-5",
        "client":"标题5",
        "desc":"add your description here"
    },
    {
        "id":"slide-img-6",
        "client":"标题6",
        "desc":"add your description here"
    },
    {
        "id":"slide-img-7",
        "client":"标题7",
        "desc":"add your description here"
    }
	];
   </script>
  </div>
</div>
</body>
</html>

JS代码(lrtk.js):

$(function(){
	$('a').focus(function(){
	this.blur();
}
);
	SI.Files.stylizeAll();
	slider.init();
	$('input.text-default').each(function(){
	$(this).attr('default',$(this).val());
}
).focus(function(){
	if($(this).val()==$(this).attr('default')) $(this).val('');
}
).blur(function(){
	if($(this).val()=='') $(this).val($(this).attr('default'));
}
);
	$('input.text,textarea.text').focus(function(){
	$(this).addClass('textfocus');
}
).blur(function(){
	$(this).removeClass('textfocus');
}
);
	var popopenobj=0,popopenaobj=null;
	$('a.popup').click(function(){
	var pid=$(this).attr('rel').split('|')[0],_os=parseInt($(this).attr('rel').split('|')[1]);
	var pobj=$('#'+pid);
	if(!pobj.length) return false;
	if(typeof popopenobj=='object' && popopenobj.attr('id')!=pid){
	popopenobj.hide(50);
	$(popopenaobj).parent().removeClass(popopenobj.attr('id').split('-')[1]+'-open');
	popopenobj=null;
}
return false;
}
);
	$('p.images img').click(function(){
	var newbg=$(this).attr('src').split('bg/bg')[1].split('-thumb')[0];
	$(document.body).css('backgroundImage','url(\'../images/bg/bg'+newbg+'.jpg)');
	$(this).parent().find('img').removeClass('on');
	$(this).addClass('on');
	return false;
}
);
	$('div.sc-large div.img:has(div.tml)').each(function(){
	$('div.tml',this).hide();
	$(this).append('<a href="#" class="tml_open">&nbsp;
	</a>').find('a').css({
	left:parseInt($(this).offset().left)+864,top:parseInt($(this).offset().top)+1}
).click(function(){
	$(this).siblings('div.tml').slideToggle();
	return false;
}
).focus(function(){
	this.blur();
}
);
}
);
}
);
	var slider={
	num:-1,cur:0,cr:[],al:null,at:10*1000,ar:true,init:function(){
	if(!slider.data || !slider.data.length) return false;
	var d=slider.data;
	slider.num=d.length;
	var pos=Math.floor(Math.random()*1);
	//slider.num);
	for(var i=0;
	i<slider.num;
	i++){
	$('#'+d[i].id).css({
	left:((i-pos)*1000)}
);
	$('#slide-nav').append('<a id="slide-link-'+i+'" href="#" onclick="slider.slide('+i+');
	return false;
	" onfocus="this.blur();
	">'+(i+1)+'</a>');
}
$('img,div#slide-controls',$('div#slide-holder')).fadeIn();
	slider.text(d[pos]);
	slider.on(pos);
	slider.cur=pos;
	window.setTimeout('slider.auto();
	',slider.at);
}
,auto:function(){
	if(!slider.ar) return false;
	var next=slider.cur+1;
	if(next>=slider.num) next=0;
	slider.slide(next);
}
,slide:function(pos){
	if(pos<0 || pos>=slider.num || pos==slider.cur) return;
	window.clearTimeout(slider.al);
	slider.al=window.setTimeout('slider.auto();
	',slider.at);
	var d=slider.data;
	for(var i=0;
	i<slider.num;
	i++) $('#'+d[i].id).stop().animate({
	left:((i-pos)*1000)}
,1000,'swing');
	slider.on(pos);
	slider.text(d[pos]);
	slider.cur=pos;
}
,on:function(pos){
	$('#slide-nav a').removeClass('on');
	$('#slide-nav a#slide-link-'+pos).addClass('on');
}
,text:function(di){
	slider.cr['a']=di.client;
	slider.cr['b']=di.desc;
	slider.ticker('#slide-client span',di.client,0,'a');
	slider.ticker('#slide-desc',di.desc,0,'b');
}
,ticker:function(el,text,pos,unique){
	if(slider.cr[unique]!=text) return false;
	ctext=text.substring(0,pos)+(pos%2?'-':'_');
	$(el).html(ctext);
	if(pos==text.length) $(el).html(text);
	else window.setTimeout('slider.ticker("'+el+'","'+text+'",'+(pos+1)+',"'+unique+'");
	',30);
}
}
;
	// STYLING FILE INPUTS 1.0 | Shaun Inman <http://www.shauninman.com/> | 2007-09-07if(!window.SI){
	var SI={
}
;
}
;
	SI.Files={
	htmlClass:'SI-FILES-STYLIZED',fileClass:'file',wrapClass:'cabinet',fini:false,able:false,init:function(){
	this.fini=true;
}
,stylize:function(elem){
	if(!this.fini){
	this.init();
}
;
	if(!this.able){
	return;
}
;
	elem.parentNode.file=elem;
	elem.parentNode.onmousemove=function(e){
	if(typeof e=='undefined') e=window.event;
	if(typeof e.pageY=='undefined' && typeof e.clientX=='number' && document.documentElement){
	e.pageX=e.clientX+document.documentElement.scrollLeft;
	e.pageY=e.clientY+document.documentElement.scrollTop;
}
;
	var ox=oy=0;
	var elem=this;
	if(elem.offsetParent){
	ox=elem.offsetLeft;
	oy=elem.offsetTop;
	while(elem=elem.offsetParent){
	ox+=elem.offsetLeft;
	oy+=elem.offsetTop;
}
;
}
;
}
;
}
,stylizeAll:function(){
	if(!this.fini){
	this.init();
}
;
	if(!this.able){
	return;
}
;
}
}
;

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;}
html{height:100%;}
body{height:100%;color:#a4a4a4;cursor:default;font-size:11px;line-height:16px;text-align:center;background-color:#404040;background-position:50% 0;background-repeat:no-repeat;font-family:Tahoma,sans-serif;}
a:link,a:visited{color:#fff;text-decoration:none;}
a img{border:0;}
div.wrap{width:993px;margin:0 auto;text-align:left;}
div#top div#nav{float:left;clear:both;width:993px;height:52px;margin:22px 0 0;}
div#top div#nav ul{float:left;width:700px;height:52px;list-style-type:none;}
div#nav ul li{float:left;height:52px;}
div#nav ul li a{border:0;height:52px;display:block;line-height:52px;text-indent:-9999px;}
div#header{margin:-1px 0 0;}
div#video-header{height:683px;margin:-1px 0 0;}
div#header div.wrap{height:299px;background-position:50% 0;background-repeat:no-repeat;}
div#header div#slide-holder{z-index:40;width:993px;height:299px;position:absolute;}
div#header div#slide-holder div#slide-runner{top:9px;left:9px;width:967px;height:278px;overflow:hidden;position:absolute;}
div#header div#slide-holder img{margin:0;display:none;position:absolute;}
div#header div#slide-holder div#slide-controls{left:0;bottom:0px;width:973px;height:46px;display:none;position:absolute;background:url(../images/slide-bg.png) 0 0;}
div#header div#slide-holder div#slide-controls p.text{float:left;color:#fff;display:inline;font-size:10px;line-height:16px;margin:15px 0 0 20px;text-transform:uppercase;}
div#header div#slide-holder div#slide-controls p#slide-nav{float:right;height:24px;display:inline;margin:11px 15px 0 0;}
div#header div#slide-holder div#slide-controls p#slide-nav a{float:left;width:24px;height:24px;display:inline;font-size:11px;margin:0 5px 0 0;line-height:24px;font-weight:bold;text-align:center;text-decoration:none;background-position:0 0;background-repeat:no-repeat;}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{background-position:0 -24px;}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(../images/silde-nav.png);}
div#nav ul li a{background:url(../images/nav.png) no-repeat;}

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