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>jQuery带缩略图的宽屏焦点图</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jQuery.1.9.1.js" ></script>

</head>

<body>

<div class="slide banner" data-slide='{"action":"click","fn":"banner_ext","time":"8000"}'>
	<div class="ban_c album"><a href="#"><img src="img/20140225171729652.jpg" alt="美国展" /></a></div>
	<div class="ban_c album"><a href="#"><img src="img/20140113173751727.jpg" alt="国家科技奖" /></a></div>
	<div class="ban_c album"><a href="#"><img src="img/2013123109501990.jpg" alt="网站新精彩" /></a></div>
</div>
<div class="wrap bann_ext">
	<ul class="l frontCover"></ul>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

var ie6 = !-[1,] && !window.XMLHttpRequest;
	var userAgent = navigator.userAgent.toLowerCase();
	var browser ={
	ie8:/msie 8/.test(userAgent),ie7:/msie 7/.test(userAgent)}
;
	//Slide func$.fn.slide=function(){
	var defaults,opts,data_opts,$this,$b_,t,n=0,count,$nav,$p,$n,DelayObj,Delay=false;
	defaults={
	fade:true,auto:true,time:4000,action:'mouseover',fn:null}
;
	$this=$(this);
	data_opts=$this.data('slide')||{
}
;
	opts=$.extend({
}
,defaults,data_opts);
	$b_=$this.children('.ban_c');
	count=$b_.length;
	if($this.find('.ban_nav').length){
	$nav=$this.find('.ban_nav')}
else{
	$nav=$('<div class="ban_nav"></div>');
	for(i=0;
	i<count;
	i++){
	$nav.append('<a>'+(i+1)+'</a>')}
;
	$this.append($nav)}
;
	$this.append('<a class="Left" onselectstart="return false;
	"></a><a class="Right" onselectstart="return false;
	"></a>');
	$nav.children('a').eq(0).addClass('on');
	$nav.children('a').eq(1).addClass('ban_next');
	$nav.children('a').eq(count-1).addClass('ban_prev');
	$b_.hide().eq(0).show();
	if(ie6){
	$b_.height($b_.attr('height') || $this.height())}
;
	$nav.children('a').each(function(index){
	$(this).on(opts.action,function(event){
	event.preventDefault();
	event.stopPropagation();
	if (index >= count){
	return false}
else{
	$nav.children('a').eq(index-1).addClass('ban_prev').siblings().removeClass('ban_prev');
	$nav.children('a').eq(index==count-1 ? 0:index+1).addClass('ban_next').siblings().removeClass('ban_next')}
;
	if(opts.fade){
	$b_.stop(1,1).fadeOut(200).eq(index).stop(1,1).fadeIn(500)}
else{
	$b_.hide().eq(index).show()}
;
	$(this).addClass('on').siblings().removeClass("on");
	n=index}
)}
);
	$p=$(this).find('.Left');
	$n=$(this).find('.Right');
	if(opts.auto){
	t = setInterval(function(){
	showAuto()}
,opts.time);
	$this.mouseenter(function(){
	clearInterval(t);
}
).mouseleave(function(){
	t=setInterval(function(){
	showAuto()}
,opts.time);
}
)}
;
	$p.click(function(){
	showPre()}
);
	$n.click(function(){
	showAuto()}
);
	function showAuto(){
	n=n>=(count - 1) ? 0:++n;
	$nav.find('a').eq(n).trigger(opts.action);
}
;
	function showPre(){
	n=n<=0 ? (count - 1):--n;
	$nav.find('a').eq(n).trigger(opts.action)}
;
	if(opts.fn){
	eval(opts.fn+"(opts,$b_,$nav)")}
}
;
	$('.slide').each(function(){
	$(this).slide()}
);
	//banner专辑封面function banner_ext(opts,$b_,$nav){
	var album=$b_.filter(function(){
	return $(this).hasClass('album')}
),newslink=$('.banner').find('.link');
	newslink.eq(0).show();
	if(browser.ie8) opts.fade=false;
	$b_.each(function(i){
	$(this).data('index',i)}
);
	album.each(function(i){
	$('.frontCover').append('<li index="'+($(this).data('index'))+'"><div class="img">'+$(this).find('a').eq(0).html()+'</div><p>'+$(this).find('img').eq(0).attr('alt')+'</p></li>')}
);
	$nav.children('a').each(function(index){
	$(this).click(function(){
	$('.frontCover').children('li').filter(function(){
	return $(this).attr('index')==index}
).addClass('open').siblings().removeClass('open');
	newslink.eq($('.frontCover').find('.open').index()).show().siblings('.link').hide();
}
)}
);
	$('.frontCover').children('li').click(function(){
	$nav.children('a').eq($(this).attr('index')).trigger('click')}
);
	$('.frontCover').children('li').eq(0).addClass('open').end().eq(-1).css('margin',0)}
;

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font-size:12px;}
/* banner */
.banner{height:500px;}
.banner .ban_c img{position:absolute;width:1920px;left:50%;margin-left:-960px;top:0;}
.banner .ban_nav{display:none;}
.banner .Left,.banner .Right{position:absolute;width:38px;height:38px;background:url(../img/cir_white.gif) no-repeat #aaa;right:50%;bottom:15px;}
.banner .Left{margin-right:-450px;background-position:5px 0}
.banner .Right{margin-right:-490px;background-position:-33px 0;background-color:#e6292f;}
.bann_ext{position:relative;}
.frontCover{position:absolute;top:-120px;padding:0 0 16px;border-bottom:5px solid #de0000;}
.frontCover li{float:left;width:82px;padding:3px;background:#000;color:#fff;overflow:hidden;margin-right:10px;cursor:pointer;}
.frontCover p{text-align:center;height:14px;line-height:18px;overflow:hidden;}
.frontCover .img{position:relative;height:50px;overflow:hidden;}
.frontCover img{position:absolute;width:192px;height:50px;left:-50px;}
.frontCover .open{background:#e60013;}
.wrap{width:980px;margin-left:auto;margin-right:auto;}
/*幻灯片(组件)*/
.slide{position:relative;width:100%;}
.ban_c{display:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;}
.ban_c img{width:100%;height:100%;}
.ban_t{position:absolute;left:0;bottom:0;width:100%;padding:4px 0;text-indent:10px;white-space:nowrap;overflow:hidden;color:#fff;background:rgba(0,0,0,.5);filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#88000000,endcolorstr=#88000000);z-index:3;}
.ban_nav{position:absolute;bottom:0;left:0;width:100%;text-align:right;z-index:4;}
.ban_nav a{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;overflow:hidden;text-align:center;margin-right:8px;cursor:pointer;text-decoration:none;font-size:10px;-webkit-text-size-adjust:none;background:#ccc;}
.ban_nav .on{background:#f90;color:#fff;}
.Left,.Right{cursor:pointer;}

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