jquery带文字焦点图轮播滚动切换特效代码

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

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

以下是 jquery带文字焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery带文字焦点图切换</title>
<link rel='stylesheet' type='text/css' href='Slideshow.css' />
<script type='text/javascript' src='jQuery.js'></script>
<script type='text/javascript' src='Slideshow.js' charset='utf-8'></script>

</head>
<body>
<center>
<div id='tmpSlideshow'>
<div id='tmpSlide-1' class='tmpSlide'>
<img src='images/3.jpg' alt='Slide' />   
<div class='tmpSlideCopy'>
<h4>Lorem ipsum dolor</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo 
mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis 

</p>

</div>
</div>
<div id='tmpSlide-2' class='tmpSlide'>
<img src='images/4.jpg' alt='Slide' />   
<div class='tmpSlideCopy'>
<h4>Ut et leo ut quam</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo 
mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis 
ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut 
quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, 
faucibus eget libero.
</p>

</div>
</div>
<div id='tmpSlide-3' class='tmpSlide'>
<img src='images/2.jpg' alt='Slide' />   
<div class='tmpSlideCopy'>
<h4>Sed sapien quam</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse leo 
mauris, sollicitudin vel euismod vitae, sollicitudin sit amet ante. Duis 
ipsum felis, rutrum eu ultrices sit amet, iaculis a sapien. Ut et leo ut 
quam tempor auctor. Sed sapien quam, consequat ut adipiscing sit amet, 
faucibus eget libero.
</p>


</div>
</div>
<div id='tmpSlideshowControls'>
<h4>Features</h4>
<div class='tmpSlideshowControl' id='tmpSlideshowControl-1'><span>1</span></div>
<div class='tmpSlideshowControl' id='tmpSlideshowControl-2'><span>2</span></div>
<div class='tmpSlideshowControl' id='tmpSlideshowControl-3'><span>3</span></div>

</div>
</div>
</center>
</body>
</html>

JS代码(Slideshow.js):

var $$ = $.fn;
	$$.extend({
	SplitID:function(){
	return this.attr('id').split('-').pop();
}
,Slideshow:{
	Ready:function(){
	$('div.tmpSlideshowControl') .hover( function(){
	$(this).addClass('tmpSlideshowControlOn');
}
,function(){
	$(this).removeClass('tmpSlideshowControlOn');
}
) .click( function(){
	$$.Slideshow.Interrupted = true;
	$('div.tmpSlide').hide();
	$('div.tmpSlideshowControl').removeClass('tmpSlideshowControlActive');
	$('div#tmpSlide-' + $(this).SplitID()).show() $(this).addClass('tmpSlideshowControlActive');
}
);
	this.Counter = 1;
	this.Interrupted = false;
	this.Transition();
}
,Transition:function(){
	if (this.Interrupted){
	return;
}
this.Last = this.Counter - 1;
	if (this.Last < 1){
	this.Last = 3;
}
$('div#tmpSlide-' + this.Last).fadeOut( 'slow',function(){
	$('div#tmpSlideshowControl-' + $$.Slideshow.Last).removeClass('tmpSlideshowControlActive');
	$('div#tmpSlideshowControl-' + $$.Slideshow.Counter).addClass('tmpSlideshowControlActive');
	$('div#tmpSlide-' + $$.Slideshow.Counter).fadeIn('slow');
	$$.Slideshow.Counter++;
	if ($$.Slideshow.Counter > 3){
	$$.Slideshow.Counter = 1;
}
setTimeout('$$.Slideshow.Transition();
	',5000);
}
);
}
}
}
);
	$(document).ready( function(){
	$$.Slideshow.Ready();
}
);

CSS代码(Slideshow.css):

body{font-family:Arial,sans-serif;}
div#tmpSlideshow{margin:10px;padding:30px 0 0 0;position:relative;height:335px;width:755px;border:1px solid rgb(200,200,200);}
div.tmpSlide{position:absolute;top:0;left:0;width:730px;height:332px;display:none;}
div.tmpSlide img{float:left;margin:30px 0 0 15px;width:527px;border:1px solid rgb(244,244,244);}
div#tmpSlideshowControls{position:absolute;bottom:30px;right:11px;width:175px;}
div.tmpSlideshowControl{border:1px solid #e1dece;float:left;margin:0 5px 0 0;background:url('Feature.png') no-repeat;width:38px;height:36px;color:#554d31;font:14px Arial,sans-serif;text-align:center;cursor:pointer;}
div.tmpSlideshowControl span{line-height:36px;vertical-align:middle;}
div.tmpSlideshowControlOn{background-image:url('FeatureOver.png');}
div.tmpSlideshowControlActive{border:1px solid rgb(161,155,137);}
div.tmpSlideCopy{position:absolute;left:565px;top:20px;width:170px;}
div#tmpSlideshow h4{color:#b90f23;text-transform:uppercase;font:14px Arial,sans-serif;margin:10px 0;}
div.tmpSlideCopy p{font:11px Arial,sans-serif;line-height:1.75em;}

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