jQuery简洁全屏banner图片轮播滚动切换特效代码

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

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

以下是 jQuery简洁全屏banner图片轮播滚动切换特效代码的示例演示效果:

当前平台(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="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery简洁全屏banner图片切换代码，属于站长常用代码" />
<title>jQuery简洁全屏banner图片切换代码</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.11.1.min.js" type="text/javascript" ></script>
</head>
<body>
<!-- 代码 开始 -->
<div id="solid">
    <div class="solid0"></div><div class="solid1"></div><div class="solid2"></div>
    <ul>
        <li><img src="images/width_pic1.jpg" /></li>
        <li><img src="images/width_pic2.jpg" /></li>
        <li><img src="images/width_pic3.jpg" /></li>
    </ul>
    <div id="btt"><span></span> <span></span> <span></span></div>
</div>
<script src="js/fordboy.js"></script>
<!-- 代码 结束 -->
</body>
</html>

JS代码(fordboy.js):

/* name:chenyanlin;
	QQ:278101055;
	E-mail:278101055@qq.com;
	*/
var total=$("#solid ul").children().length;
	var now=0;
	function clock(){
	var cname if(now==total -1){
	now=0;
}
else{
	now=now+1;
}
for(i=0;
	i<total;
	i++){
	cname="#solid .solid" + i;
	$("#solid ul li").eq(i).css("display","none");
	$("#btt span").eq(i).css("background","#3d3d3d");
	$(cname).css("display","none");
}
cname="#solid .solid" + now;
	$("#solid ul li").eq(now).fadeIn(400);
	$("#btt span").eq(now).css("background","#ffffff");
	$(cname).css("display","block");
}
$(document).ready(function(){
	$("#solid ul li").eq(0).fadeIn(400);
	$("#btt span").eq(0).css("background","#ffffff");
	$("#solid .solid0").fadeIn(50);
	$("#solid ul li,#btt span").mouseenter(function(){
	window.clearInterval(int);
}
);
	$("#btt span").mouseenter(function(){
	if($(this).index()!=now){
	now=$(this).index()-1;
	clock();
}
}
);
	var int=self.setInterval("clock()",3000)$("#solid ul li,#solid span").mouseleave(function(){
	int=self.setInterval("clock()",3000)}
);
	$("#btt span").eq(1).css("margin-left","52px");
	$("#btt span").eq(2).css("margin-left","90px");
}
);

CSS代码(css.css):

body{margin:0px;padding:0px;}
#solid{width:100%;height:501px;clear:both;margin-top:50px;position:relative;}
#solid .solid0,#solid .solid1,#solid .solid2{position:absolute;left:0px;top:0px;width:100%;height:498px;display:none;}
#solid .solid0{background:#78c4db;}
#solid .solid1{background:#c5c9db;}
#solid .solid2{background:#e7dfd1;}
#solid ul{margin:0px;padding:0px;list-style:none;}
#solid ul li{position:absolute;left:50%;top:0px;width:905px;height:501px;margin-left:-452px;display:none;cursor:pointer;}
#solid #btt{width:905px;height:55px;top:445px;left:50%;position:relative;margin-left:-452px;}
#solid #btt span{position:absolute;top:15px;left:45%;display:block;width:30px;height:8px;margin:0 15px;text-align:center;background:#3d3d3d;z-index:1000;cursor:pointer;filter:alpha(opacity=70);/*IE滤镜，透明度50%*/
-moz-opacity:0.7;/*Firefox私有，透明度50%*/
opacity:0.7;/*其他，透明度50%*}

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