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>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/index.js"></script>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div class="mainbanner">
	<div class="mainbanner_window">
		<ul id="slideContainer">
			<li><a href="#"><img src="images/50cafba1c5d2874725000028.jpg" width="1600" height="454" alt="定制团"  /></a></li>
			<li><a href="#"><img src="images/50d182d7c5d287d84b000013.jpg" width="1600" height="454" alt="彩电专场"  /></a></li>
			<li><a href="#"><img src="images/50b8d9b9a103a7f80e00023d.jpg" width="1600" height="454" alt="12月厂庆主场"  /></a></li>
			<li><a href="#"><img src="images/50cafb94c5d287052700013d.jpg" width="1600" height="454" alt="摇钱树"  /></a></li>
		</ul>
	</div>
	<ul class="mainbanner_list">
		<li><a href="javascript:void(0);">1</a></li>
		<li><a href="javascript:void(0);">2</a></li>
		<li><a href="javascript:void(0);">3</a></li>
		<li><a href="javascript:void(0);">4</a></li>
	</ul>
</div>
</body>
</html>

JS代码(index.js):

$(function(){
	$('.mainbanner').each(function(){
	var $_root = $(this);
	var $window_b = $_root.find('.mainbanner_window');
	var $list = $_root.find('.mainbanner_list');
	var $items = $list.children();
	var $window_ul = $window_b.find('#slideContainer');
	var count = $items.length;
	var item_size = 2000;
	var dur_ms = 1000;
	var autoplay_interval = 8000;
	var cur_idx = 0;
	var fix_idx = function(_idx){
	if( _idx < 0 )return(count - 1);
	if( _idx >= count )return 0;
	return _idx;
}
var goto = function(_idx){
	var idx = fix_idx( _idx );
	$items.eq(idx).addClass('active').siblings().removeClass('active');
	if( cur_idx != idx ){
	var offset_x = - idx * item_size;
	$window_ul.stop().animate({
	'left':offset_x}
,dur_ms);
	cur_idx = idx;
}
}
$items.each(function(index,element){
	var $cur_item = $(this);
	var $cur_a = $cur_item.find('a');
	$cur_a.data('index',index);
	$cur_a.click(function(){
	var index = $(this).data('index');
	goto(index);
	return false;
}
);
}
);
	var autoplay_flag = true;
	window.setInterval(function(){
	if(autoplay_flag){
	goto( cur_idx + 1 );
}
}
,autoplay_interval);
	$_root.hover(function(){
	autoplay_flag = false;
}
,function(){
	autoplay_flag = true;
}
);
	goto(0);
}
);
}
)

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/* mainbanner */
.mainbanner{height:454px;overflow:hidden;position:relative;}
.mainbanner_window{left:50%;width:2000px;height:454px;overflow:hidden;margin-left:-1000px;position:absolute;}
.mainbanner_window ul{width:999999px;height:454px;position:relative;}
.mainbanner_window li{background:rgb(204,204,204);width:2000px;height:454px;text-align:center;font-size:0px;float:left;display:inline;}
.mainbanner_list{left:50%;top:390px;width:500px;height:30px;margin-left:-75px;position:absolute;}
.mainbanner_list li{width:30px;height:30px;overflow:hidden;float:left;display:inline;}
.mainbanner_list a{background:url("../images/50c15ece07fd0f3407000083.png") no-repeat;width:25px;height:25px;line-height:25px;overflow:hidden;text-align:center;color:rgb(255,255,255);font-size:12px;font-weight:700;float:left;display:inline-block;}
.mainbanner_list li.active a{background-position:0 -30px;text-decoration:none;}
.mainbanner_list li a:hover{background-position:0 -30px;text-decoration:none;}

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