带时间线的宽屏图片切换特效代码

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

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

以下是带时间线的宽屏图片切换特效代码的示例演示效果:

当前平台(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="带时间轴,jquery,宽屏,图片切换" />
<meta name="description" content="一款非常不错的jQuery 带时间线的大幅焦点图轮番切换代码，用在首页很大气，时间线适时显示图片切换的状态，用鼠标点击也可以 随时切换。" />
<title>带时间线的宽屏图片切换</title>
<link rel=stylesheet type=text/css href="css/css.css" media=all>
<script type=text/javascript src="js/chinaz.js"></script>
<script type=text/javascript src="js/jquery.tooltip.pack.js"></script>
<script type=text/javascript src="js/player.js"></script>
<script type=text/javascript>
$(document).ready(function() {
  slideshow_data["1"] = new views_slideshow_data(10, 5000, 1, true, "slow", 0.25);
  views_slideshow_timer("1", true);
  $("#views_slideshow_main_1").hover(
    function() {
      views_slideshow_pause("1");
    },
    function() {
      views_slideshow_resume("1");
    });
});
</script>
</head>
<body class="front" style="text-align:center">
<br /><br />

<div id=wrapper>
<div id=container>
<div id=introBoxes>
<div id=introWelcome class=introPart><a href="#" target="_blank"><img src="images/01.jpg" width="970" height="287" border="0" /></a></div>
<div id=introAccessibility class=introPart><a href="#" target="_blank"><img src="images/02.jpg" width="970" height="287" /></a></div>
<div id=introPerformance class=introPart><a href="#" target="_blank"><img src="images/03.jpg" width="970" height="287" /></a></div>
<div id=introFeatured class=introPart><a href="#" target="_blank"><img src="images/04.jpg" width="970" height="287" /></a></div>
<div id=introCommunity class=introPart><a href="#" target="_blank"><img src="images/05.jpg" width="970" height="287" /></a></div>
</div><!--introBoxes-->
<div id=introNav>
<UL id=playback>
  <LI class=prev><A href="#">Previous</A></LI>
  <LI class=play><A href="#">Play</A> </LI>
  <LI class=pause><A href="#">Pause</A></LI>
  <LI class=next><A href="#">Next</A> </LI>
 </UL>
<DIV id=timeline><DIV class=inside></DIV></DIV>
<ul class=nav>
  <li class="p1 active"><A href="#">Welcome to CKEditor 
  <span class="point p1"></span></A></li>
  <li class=p2><A href="#">Full Accessibility <SPAN 
  class="point p2"></SPAN></A></li>
  <li class=p3><A href="#">Amazing Performance <SPAN 
  class="point p3"></SPAN></A></li>
  <li class=p4><A href="#">Full Featured <SPAN 
  class="point p4"></SPAN></A></li>
  <li class=p5><A href="#">Great Community <SPAN 
  class="point p5"></SPAN></A></li>
</ul>
</div><!--introNav-->
</div><!--container-->
</div><!--wrapper-->
</body>
</html>

JS代码(player.js):

var defaultManualSpeed = 500;
	var defaultAutoSpeed = 15000;
	var defaultAutoSpeedEdge = 7500;
	// optimal - half of defaultAutoSpeedfunction goToPoint1(speed,gearbox,way){
	if (!speed) speed = defaultManualSpeed;
	if (gearbox != 'auto') showIntroPart('Welcome');
	if (way == 'throughEdge'){
	if (gearbox == 'auto'){
	$('#timeline .inside').animate({
	backgroundPosition:'-7px -42px'}
,defaultAutoSpeedEdge,function(){
	$('#introNav .nav li').removeClass('active').filter('.p1').addClass('active');
	$('#timeline .inside').css({
	backgroundPosition:'-990px -42px'}
);
	$('#timeline .inside').animate({
	backgroundPosition:'-913px -42px'}
,defaultAutoSpeedEdge,function(){
	$('#introNav .nav li').removeClass('active').filter('.p1').addClass('active');
	if (gearbox == 'auto') showIntroPart('Welcome');
	setTimeout(function(){
	introStop();
}
,defaultManualSpeed);
}
);
}
);
}
else{
	$('#timeline .inside').animate({
	backgroundPosition:'-7px -42px'}
,250,function(){
	$('#introNav .nav li').removeClass('active').filter('.p1').addClass('active');
	$('#timeline .inside').css({
	backgroundPosition:'-990px -42px'}
);
	$('#timeline .inside').animate({
	backgroundPosition:'-913px -42px'}
,250,function(){
	$('#introNav .nav li').removeClass('active').filter('.p1').addClass('active');
	if (gearbox == 'auto') showIntroPart('Welcome');
	setTimeout(function(){
	introStop();
}
,defaultManualSpeed);
}
);
}
);
}
}
else{
	if (!speed) speed = defaultManualSpeed;
	$('#timeline .inside').animate({
	backgroundPosition:'-913px -42px'}
,speed,function(){
	$('#introNav .nav li').removeClass('active').filter('.p1').addClass('active');
	if (gearbox == 'auto') showIntroPart('Welcome');
}
);
}
}
function goToPoint2(speed,gearbox){
	if (!speed) speed = defaultManualSpeed;
	if (gearbox != 'auto') showIntroPart('Accessibility');
	$('#timeline .inside').animate({
	backgroundPosition:'-709px -42px'}
,speed,function(){
	$('#introNav .nav li').removeClass('active').filter('.p2').addClass('active');
	if (gearbox == 'auto') showIntroPart('Accessibility');
}
);
}
function goToPoint3(speed,gearbox){
	if (!speed) speed = defaultManualSpeed;
	if (gearbox != 'auto') showIntroPart('Performance');
	$('#timeline .inside').animate({
	backgroundPosition:'-505px -42px'}
,speed,function(){
	$('#introNav .nav li').removeClass('active').filter('.p3').addClass('active');
	if (gearbox == 'auto') showIntroPart('Performance');
}
);
}
function goToPoint4(speed,gearbox){
	if (!speed) speed = defaultManualSpeed;
	if (gearbox != 'auto') showIntroPart('Featured');
	$('#timeline .inside').animate({
	backgroundPosition:'-300px -42px'}
,speed,function(){
	$('#introNav .nav li').removeClass('active').filter('.p4').addClass('active');
	if (gearbox == 'auto') showIntroPart('Featured');
}
);
}
function goToPoint5(speed,gearbox,way){
	if (!speed) speed = defaultManualSpeed;
	if (gearbox != 'auto') showIntroPart('Community');
	if (way == 'throughEdge'){
	if (gearbox == 'auto'){
	$('#timeline .inside').animate({
	backgroundPosition:'-990px -42px'}
,defaultAutoSpeedEdge,function(){
	$('#introNav .nav li').removeClass('active').filter('.p5').addClass('active');
	$('#timeline .inside').css({
	backgroundPosition:'-7px -42px'}
);
	$('#timeline .inside').animate({
	backgroundPosition:'-97px -42px'}
,defaultAutoSpeedEdge,function(){
	$('#introNav .nav li').removeClass('active').filter('.p5').addClass('active');
	if (gearbox == 'auto') showIntroPart('Community');
}
);
}
);
}
else{
	$('#timeline .inside').animate({
	backgroundPosition:'-990px -42px'}
,250,function(){
	$('#introNav .nav li').removeClass('active').filter('.p5').addClass('active');
	$('#timeline .inside').css({
	backgroundPosition:'-7px -42px'}
);
	$('#timeline .inside').animate({
	backgroundPosition:'-97px -42px'}
,250,function(){
	$('#introNav .nav li').removeClass('active').filter('.p5').addClass('active');
	if (gearbox == 'auto') showIntroPart('Community');
}
);
}
);
}
}
else{
	$('#timeline .inside').animate({
	backgroundPosition:'-97px -42px'}
,speed,function(){
	$('#introNav .nav li').removeClass('active').filter('.p5').addClass('active');
	if (gearbox == 'auto') showIntroPart('Community');
}
);
}
}
function introAutoPlay(){
	$('#introNav #playback .play').hide().parent().parent().find('.pause').show();
	if ($('#introNav .nav li.active').size() > 0){
	var activePointNo = $('#introNav .nav li.active').attr('class').substr(1,1);
}
if (activePointNo < 2) goToPoint2(defaultAutoSpeed,'auto');
	if (activePointNo < 3) goToPoint3(defaultAutoSpeed,'auto');
	if (activePointNo < 4) goToPoint4(defaultAutoSpeed,'auto');
	if (activePointNo < 5) goToPoint5(defaultAutoSpeed,'auto');
	goToPoint1(defaultAutoSpeed,'auto','throughEdge');
}
function introStop(){
	$('#timeline .inside').stop(function(){
	$('#timeline .inside').stop();
}
);
	$('#introNav #playback .pause').hide().parent().parent().find('.play').show();
}
function showIntroPart(part){
	if ( $.browser.msie ){
	$('.introPart').hide();
	$('#intro' + part).show();
}
else{
	$('.introPart').fadeOut(defaultManualSpeed);
	$('#intro' + part).fadeIn(defaultManualSpeed);
}
}
$(document).ready(function(){
	$('#introNav #playback .play a').click(function(){
	introAutoPlay();
	return false;
}
);
	$('#introNav #playback .pause a').click(function(){
	introStop();
	return false;
}
);
	$('#introNav #playback .prev a').click(function(){
	introStop();
	var activePointNo = $('#introNav .nav li.active').attr('class').substr(1,1);
	switch (activePointNo){
	case '1':goToPoint5(defaultManualSpeed,'','throughEdge');
	break;
	case '2':goToPoint1();
	break;
	case '3':goToPoint2();
	break;
	case '4':goToPoint3();
	break;
	case '5':goToPoint4();
	break;
}
return false;
}
);
	$('#introNav #playback .next a').click(function(){
	introStop();
	var activePointNo = $('#introNav .nav li.active').attr('class').substr(1,1);
	switch (activePointNo){
	case '1':goToPoint2();
	break;
	case '2':goToPoint3();
	break;
	case '3':goToPoint4();
	break;
	case '4':goToPoint5();
	break;
	case '5':goToPoint1(defaultManualSpeed,'','throughEdge');
	break;
}
return false;
}
);
	$('#introNav .p1 a').click(function(){
	introStop();
	if (!$(this).parent().hasClass('active')) goToPoint1();
	return false;
}
);
	$('#introNav .p2 a').click(function(){
	introStop();
	if (!$(this).parent().hasClass('active')) goToPoint2();
	return false;
}
);
	$('#introNav .p3 a').click(function(){
	introStop();
	if (!$(this).parent().hasClass('active')) goToPoint3();
	return false;
}
);
	$('#introNav .p4 a').click(function(){
	introStop();
	if (!$(this).parent().hasClass('active')) goToPoint4();
	return false;
}
);
	$('#introNav .p5 a').click(function(){
	introStop();
	if (!$(this).parent().hasClass('active')) goToPoint5();
	return false;
}
);
	if ($('#mainnav ul').size() > 0){
	var pointLeft = Math.ceil($('#mainnav > li.withSubnav > a').width() / 2) - 3;
	$('#mainnav > li.withSubnav > a span').after('<div id="subnavPoint"></div>');
	$('#subnavPoint').css('left',pointLeft);
}
$('#timeline .inside').css('background-position','-913px -42px');
	$('#leading,#mainnav ul,#main h2,.demoNav li,.featuresNav li.active').not('h2.title,.customerList h2').append('<span class="corner1"></span><span class="corner2"></span><span class="corner3"></span><span class="corner4"></span>');
	$('.btnDemo a,.btnDownload a,.btnLearn a,.btnBuyNow a,p.downloads a,.boxProductTour p a').hover(function(){
	$(this).fadeTo(200,'0.8');
}
,function(){
	$(this).stop().fadeTo(200,'1');
}
);
}
);
	function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function'){
	window.onload = func;
}
else{
	window.onload = function(){
	if (oldonload){
	oldonload();
}
func();
}
}
}
addLoadEvent(function(){
	introAutoPlay();
}
);

CSS代码(css.css):

BODY{BACKGROUND:url(../images/bg-body.jpg) #fff repeat-x 0px 0px;LINE-HEIGHT:16px;FONT-FAMILY:Arial,Helvetica,sans-serif;COLOR:#777e7f;FONT-SIZE:12px}
A{color:#666;}
img{border:0px;}
UL,OL{BORDER-STYLE:none;PADDING:0px;MARGIN:0px;}
#wrapper{BACKGROUND:url(../images/bg-content-shadow.jpg) no-repeat center 315px}
#container{MARGIN:0px auto;WIDTH:970px}
#introBoxes{POSITION:relative;HEIGHT:287px}
.introPart{DISPLAY:none}
#introWelcome{DISPLAY:block}
#introNav{POSITION:relative;HEIGHT:105px}
#introNav #playback LI{PADDING:0px;LIST-STYLE-TYPE:none;MARGIN:0px;float:left;}
#introNav #playback A{BACKGROUND-IMAGE:url(../images/nav-icons.png);TEXT-INDENT:-9000px;MARGIN:0px 3px 0px 0px;OUTLINE-WIDTH:0px;WIDTH:20px;DISPLAY:block;BACKGROUND-REPEAT:no-repeat;FLOAT:left;HEIGHT:20px}
#introNav #playback .prev A{BACKGROUND-POSITION:0px 0px}
#introNav #playback .play A{BACKGROUND-POSITION:0px -20px}
#introNav #playback .pause{display:none;}
#introNav #playback .pause A{BACKGROUND-POSITION:0px -60px}
#introNav #playback .next A{BACKGROUND-POSITION:0px -40px;}
#introNav #playback A:hover{opacity:0.9}
#timeline{POSITION:absolute;WIDTH:100%;BACKGROUND:url(../images/timeline.png) no-repeat -10px 0px;HEIGHT:15px;OVERFLOW:hidden;TOP:25px;LEFT:0px}
#timeline .inside{POSITION:relative;WIDTH:990px;BACKGROUND:url(../images/timeline.png) no-repeat -913px -42px;HEIGHT:100%}
#introNav UL.nav{POSITION:absolute;MARGIN:0px;WIDTH:100%;HEIGHT:40px;TOP:45px;LEFT:0px}
#introNav .nav LI{POSITION:absolute;TEXT-ALIGN:center;PADDING-BOTTOM:0px;LIST-STYLE-TYPE:none;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;BACKGROUND:none transparent scroll repeat 0% 0%;TOP:0px;PADDING-TOP:0px;LEFT:0px}
#introNav .nav .p1{LEFT:5px}
#introNav .nav .p2{LEFT:221px}
#introNav .nav .p3{LEFT:412px}
#introNav .nav .p4{LEFT:642px}
#introNav .nav .p5{LEFT:835px}
#introNav .nav LI A{OUTLINE-WIDTH:0px;COLOR:#6e7577;FONT-SIZE:14px}
#introNav .nav LI A:hover{COLOR:#525758;TEXT-DECORATION:none}
#introNav .nav LI.active A{COLOR:#383c3d}
#introNav .nav A .point{POSITION:absolute;TEXT-INDENT:-9000px;OUTLINE-WIDTH:0px;WIDTH:15px;DISPLAY:block;HEIGHT:15px;TOP:-20px;LEFT:0px}
#introNav .nav .p1 .point{LEFT:58px}
#introNav .nav .p2 .point{LEFT:52px}
#introNav .nav .p3 .point{LEFT:33px}
#introNav .nav .p4 .point{LEFT:60px}
#introNav .nav .p5 .point{LEFT:64px}

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