聚合数据网站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/default.css" rel="stylesheet" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.jslider.js" type="text/javascript"></script>
</head>

<body>

<div class="swap">
	<ul id="slider">
		<li style="background:url(images/1.jpg) center center no-repeat #009ee3;" id="myicloud"></li>
		<li style="background:url(images/2.jpg) center center no-repeat #ffcc00;"></li>
		<li style="background:url(images/3.jpg) center center no-repeat #303030;">
		<div style="width:985px; margin:0 auto; margin-top:253px; padding-left:127px;">
			<a href="#"><img src="images/3_btn.png" border="0" class="png_bg"></a>
		</div>
		</li>
	</ul>
</div>
<ul id="naviSlider">
	<li sindex="1" class="on"></li>
	<li sindex="2"></li>
	<li sindex="3"></li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
	$("#slider").jSlider({
			pause:15000,
			naviSlider:'naviSlider'
		}
	);
				
})
</script>
</body>
</html>

JS代码(jquery.icloud.js):

/**��ҳbanner �ƶ��ƶ�*Author:jonedoo*/
(function($){
	$.fn.iCloud = function(options){
	var defaults ={
	speed:2000,x:"center",cloud:"icloud",y:200}
var options = $.extend(defaults,options);
	var innerWidth = $(this).width();
	var innerHeight = $(this).height();
	var cloudWith = $("#"+options.cloud).width();
	if(options.x =='center'){
	var pX =innerWidth/2;
}
else if(options.x =='right'){
	var pX =innerWidth-100;
}
else if(options.x =='left'){
	var pX = 0;
}
else{
	var pX =x;
}
if(options.y =='center'){
	var pY =innerHeight/2;
}
else if(options.y =='top'){
	var pY =0;
}
else if(options.y =='bottom'){
	var pY = innerHeight;
}
else{
	var pY =options.y;
}
//alert(options.cloud);
	$("#"+options.cloud).css({
	"margin-left":pX+"px","margin-top":pY+"px","display":""}
);
	var start =0;
	var moveCloud = function(){
	if(start == 0){
	$("#"+options.cloud).animate({
	"margin-left":"0px"}
,options.speed,function(){
	start = 1;
	moveCloud();
}
);
}
else{
	$("#"+options.cloud).animate({
	"margin-left":(innerWidth-cloudWith)+"px"}
,options.speed,function(){
	start = 0;
	moveCloud();
}
);
}
}
moveCloud();
}
}
)(jQuery);

JS代码(jquery.jslider.js):

/** JuheSlider* Author:JONEDOO* Http://www.juhe.cn*/
(function($){
	$.fn.jSlider = function(options){
	var defaults ={
	pause:3000,fadeOutTime:500,fadeInTime:500,naviSlider:'naviSlider'}
var options = $.extend(defaults,options);
	var obj = $(this);
	obj.find('li:first').show();
	//显示第一个itemvar itemCount = obj.children('li').length;
	var naviObj=$("#"+options.naviSlider);
	var i=0;
	//初始化naviObj.children('li').click(function(){
	//var index = $(this).text();
	var index =$(this).attr("sIndex");
	i = parseInt(index)-2;
	showSlider();
}
)var showSlider = function(){
	var next =i+1;
	if(i >= (itemCount-1)){
	i=-1;
	next=0;
}
obj.children('li').filter(":visible").fadeOut(options.fadeOutTime).parent().children().eq(next).fadeIn(options.fadeInTime);
	naviObj.children('li').removeClass('on').eq(next).addClass('on');
	i = i+1;
}
var interval = setInterval(function(){
	showSlider();
}
,options.pause);
}
}
)(jQuery);

CSS代码(default.css):

/* CSS Document */
@CHARSET "UTF-8";body,html{margin-left:0px;margin-top:0px;margin-right:0px;margin-bottom:0px;height:100%;width:100%;}
body,td,th{font-size:12px;font-family:"Microsoft Yahei","黑体","宋体";}
ul{list-style:none;margin:0;padding:0;}
a:link{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
a:active{text-decoration:none;}
.swap{width:100%;height:400px;margin:0 auto;}
#slider{list-style:none;width:100%;height:100%;margin:0;padding:0;}
#slider li{width:100%;height:400px;display:none;position:absolute;}
#naviSlider{list-style:none;margin:0 auto;width:auto;text-align:center;margin-top:3px;*margin-top:5px;}
#naviSlider li{height:10px;width:10px;cursor:pointer;display:inline-block;background:url(img/dot.png) -10px center no-repeat;_background:url(img/dot_ie6.png) -10px center no-repeat;*zoom:1;*display:inline;*margin-left:2px;}
#naviSlider li.on{background:url(img/dot.png) left center no-repeat;_background:url(img/dot_ie6.png) left center no-repeat;}

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