右侧带缩略图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" />
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<title>右侧带缩略图jquery焦点图</title>
</head>
<body>
<!-- 代码 开始 -->
<div id="zSlider">
	<div id="picshow">
		<div id="picshow_img">
			<ul>
			  <li><a href="#" target="_blank"><img src="images/1.jpg"></a></li>
			  <li><a href="#" target="_blank"><img src="images/2.jpg"></a></li>
			  <li><a href="#" target="_blank"><img src="images/3.jpg"></a></li>
			  <li><a href="#" target="_blank"><img src="images/4.jpg"></a></li>
			  <li><a href="#" target="_blank"><img src="images/5.jpg"></a></li>
			  <li><a href="#" target="_blank"><img src="images/6.jpg"></a></li>
			</ul>
		</div>
		<div id="picshow_tx">
			<ul>
			  <li>
				  <h3><a href="#" target="_blank">中国死飞店铺推介：上海死飞店FACTORY FIVE</a></h3>
				  <p>上海第一家死飞精品店，由三个外国人与一中国人联合创办，主要经营客订个性单速车，帮助他们得到自己梦想中的车架。</p>
			  </li>
			  <li>
				  <h3><a href="#" target="_blank">骑看世界：纯美的世界恬静的心冰岛骑游之旅</a></h3>
				  <p>冰岛有“火山岛”、“雾岛”、“冰封的土地”、“冰与火之岛”之称。有想过在这里骑游吗？下面看看Ovegur的冰岛骑游之旅吧。</p>
			  </li>
			  <li>
				  <h3><a href="#" target="_blank">空气糟糕透了！推荐几款实用的骑行防毒口罩</a></h3>
				  <p>这几天，全国各地的空气糟糕透顶！北京空气污染指数又爆表了！！！经过资深车友的推荐及亲身体验，整理出几款超强防毒的骑行口罩。</p>
			  </li>
			  <li>
				  <h3><a href="#" target="_blank">[组图]1200万像素带Wi-Fi 骑行记录仪Gopro Hero3评测</a></h3>
				  <p>近年来户外骑行等运动录像盛行，Gopro这品牌可说功不可没，新版的Gopro Hero3具有1200万像素带Wi-Fi功能……</p>
			  </li>
			  <li>
				  <h3><a href="#" target="_blank">张向东：南非无危险的骑行与有纠结的ubuntu(组图)</a></h3>
				  <p>“我要从南骑到北，我还要从白骑到黑。我要人们都看到我，却不知道我是谁。爱上我你就不要后悔，总有一天我要远走高飞。”</p>
			  </li>
			  <li>
				  <h3><a href="#" target="_blank">单车文化课堂⑥：学会撬胎补胎爆胎不再烦</a></h3>
				  <p>外出骑行，不会总有一个修车老大爷在你扎胎后的不远处等着你，本期课堂教会你如何撬胎补胎，再碰上爆胎，你就可以淡定了。</p>
			  </li>
			</ul>
		</div>
	</div>
	<div id="select_btn">
		<ul>
		  <li><a href="#" target="_blank"><img src="images/01.jpg"><span class="select_text">上海死飞店FACTORY FIVE</span><span class="select_date">2013/01/16</span></a></li>
		  <li><a href="#" target="_blank"><img src="images/02.jpg"><span class="select_text">骑看世界：北欧冰岛骑游之旅</span><span class="select_date">2013/01/15</span></a></li>
		  <li><a href="#" target="_blank"><img src="images/03.jpg"><span class="select_text">推荐几款实用的骑行防毒口罩</span><span class="select_date">2013/01/13</span></a></li>
		  <li><a href="#" target="_blank"><img src="images/04.jpg"><span class="select_text">骑行记录仪Gopro Hero3评测</span><span class="select_date">2013/01/08</span></a></li>
		  <li><a href="#" target="_blank"><img src="images/05.jpg"><span class="select_text">3G门户总裁张向东南非骑行日记</span><span class="select_date">2012/12/28</span></a></li>
		  <li><a href="#" target="_blank"><img src="images/06.jpg"><span class="select_text">教学：学会撬胎补胎 爆胎不再烦</span><span class="select_date">2012/12/26</span></a></li>
		</ul>
	</div>	
</div>
</body>
</html>

JS代码(zzsc.js):

// JavaScript Document$(document).ready(function(){
	$('#select_btn li:first').css('border','none');
	if ($('#zSlider').length){
	zSlider();
	$('#h_sns').find('img').hover(function(){
	$(this).fadeTo(200,0.5);
}
,function(){
	$(this).fadeTo(100,1);
}
);
}
function zSlider(ID,delay){
	var ID=ID?ID:'#zSlider';
	var delay=delay?delay:5000;
	var currentEQ=0,picnum=$('#picshow_img li').size(),autoScrollFUN;
	$('#select_btn li').eq(currentEQ).addClass('current');
	$('#picshow_img li').eq(currentEQ).show();
	$('#picshow_tx li').eq(currentEQ).show();
	autoScrollFUN=setTimeout(autoScroll,delay);
	function autoScroll(){
	clearTimeout(autoScrollFUN);
	currentEQ++;
	if (currentEQ>picnum-1) currentEQ=0;
	$('#select_btn li').removeClass('current');
	$('#picshow_img li').hide();
	$('#picshow_tx li').hide().eq(currentEQ).slideDown(400);
	$('#select_btn li').eq(currentEQ).addClass('current');
	$('#picshow_img li').eq(currentEQ).show();
	autoScrollFUN = setTimeout(autoScroll,delay);
}
$('#picshow').hover(function(){
	clearTimeout(autoScrollFUN);
}
,function(){
	autoScrollFUN = setTimeout(autoScroll,delay);
}
);
	$('#select_btn li').hover(function(){
	var picEQ=$('#select_btn li').index($(this));
	if (picEQ==currentEQ) return false;
	currentEQ = picEQ;
	$('#select_btn li').removeClass('current');
	$('#picshow_img li').hide();
	$('#picshow_tx li').hide().eq(currentEQ).slideDown(100);
	$('#select_btn li').eq(currentEQ).addClass('current');
	$('#picshow_img li').eq(currentEQ).show();
	return false;
}
);
}
;
}
)

CSS代码(zzsc.css):

/* 转载请保留版权信息：懒人图库 www.lanrentuku.com */
*{padding:0;margin:0;font-size:12px}
ul,li{list-style:none;}
img{border:0;}
#zSlider{margin:0px auto;width:1200px;overflow:hidden;}
#picshow{position:relative;}
#picshow,#picshow_img{width:880px;height:440px;overflow:hidden;float:left;}
#picshow_img li{width:880px;height:440px;overflow:hidden;float:left;display:none;}
#picshow_img img{width:880px;height:440px;}
#picshow_tx{left:0px;width:880px;bottom:0px;position:absolute;height:90px;overflow:hidden;}
#picshow_tx li{background:url(../images/picshow_bg.png) repeat;padding:10px 30px;height:70px;color:#fff;display:none;}
#picshow_tx li a{color:#fff;}
#picshow_tx li a:hover{text-decoration:underline;}
#picshow_tx li h3{margin:13px 0;}
#picshow_tx li p{color:#ccc;line-height:16px;height:16px;overflow:hidden;}
#select_btn{width:319px;height:440px;color:#111;float:right;display:inline;background-color:#f0f0f0;}
#select_btn li{padding:9px 11px 0px 9px;width:299px;height:64px;border-top:1px solid #fff;cursor:pointer;}
#select_btn li:hover{background-color:#fff;}
#select_btn li.current{background-color:#fff;}
#select_btn li.current:hover{background-color:#fff;}
#select_btn a{color:#000;}
#select_btn img{padding:2px;border:1px solid #ccc;width:70px;height:49px;margin-right:10px;float:left;}
#select_btn .select_text{height:20px;font:bold 13px/16px 'Microsoft YaHei';overflow:hidden;display:block;}
#select_btn .select_text:hover{text-decoration:underline;}
#select_btn .select_date{height:23px;line-height:23px;overflow:hidden;display:block;}

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