内容与背景一起变换的焦点图轮播滚动切换特效代码

版权：原创更新时间：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="JS代码,{keyword},JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为{title}" />
<title>{title}</title>
<link rel=stylesheet type=text/css href="css/main.css">
<script type=text/javascript src="js/jquery-1.4.4.min.js"></script>
<script type=text/javascript src="js/slides.jquery.js"></script>
<!-- 解决IE6不缓存背景图片的问题-->
<!--[if IE 6]>
<script type="text/javascript">
document.execCommand("BackgroundImageCache", false, true);
</script>
<![endif]-->
</head>
<body id="mainbody">
<!-- 代码 开始 -->
<div id="warp">
<script>
	//保证导航栏背景与图片轮播背景一起显示
	$("#mainbody").removeClass();
	$("#mainbody").addClass("index_bg05");
</script>
<script>
	$(function(){
		//滚动Banner图片的显示
		$('#slides').slides({
			preload: false,
			preloadImage: '/images/loading.gif',
			effect: 'fade',
			slideSpeed: 400,
			fadeSpeed: 100,
			play: 3000,
			pause: 100,
			hoverPause: true
		});
        	$('#js-news').ticker();
    	});
</script>
<!-- 滚动图片 -->
<div id="slides" class="banner">
<div class="banner_l"><a class="prev" href="#"><img alt="上一"页 src="images/banner_l.png" width="24" height="43"></a></div>
<div class="bannerImg">
	<div class="slides_container">
		<div id="banner_pic_1"><a href="#" target="_blank"><img alt="内容" src="images/banner05.jpg" width="925" height="357"></a></div>
		<div style="DISPLAY: none" id="banner_pic_2"><a href="#" target="_blank"><img alt="内容" src="images/banner01.gif" width="925" height="357"></a></div>
		<div style="DISPLAY: none" id="banner_pic_3"><a href="#" target="_blank"><img alt="内容" src="images/banner02.jpg" width="925" height="357"></a></div>
		<div style="DISPLAY: none" id="banner_pic_4"><a href="#" target="_blank"><img alt="内容" src="images/banner03.jpg" width="925" height="357"></a></div>
		<div style="DISPLAY: none" id="banner_pic_5"><a href="#" target="_blank"><img alt="内容" src="images/banner04.jpg" width="925" height="357"></a></div>
	</div>
</div>
<div class="banner_r"><a class="next" href="#"><img alt="下一页" src="images/banner_r.png" width="24" height="43"></a></div>
</div>
</div>
</body>
</html>

CSS代码(main.css):

BODY{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;PADDING-RIGHT:0px;}
img{border:0 none;}
ul,li{list-style-type:none;}
.index_bg01{BACKGROUND:url(../images/banner_bg01.gif) repeat-x 0px 0px}
.index_bg02{BACKGROUND:url(../images/banner_bg02.gif) repeat-x 0px 0px}
.index_bg03{BACKGROUND:url(../images/banner_bg03.gif) repeat-x 0px 0px}
.index_bg04{BACKGROUND:url(../images/banner_bg04.gif) repeat-x 0px 0px}
.index_bg05{BACKGROUND:url(../images/banner_bg05.gif) repeat-x 0px 0px}
#warp{PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:100%;PADDING-RIGHT:0px;HEIGHT:357px;;PADDING-TOP:0px;}
.banner{Z-INDEX:99;MARGIN:0px auto;WIDTH:971px;HEIGHT:357px;_width:973px}
.banner_l{MARGIN-TOP:147px;WIDTH:23px;FLOAT:left}
.banner_r{MARGIN-TOP:147px;WIDTH:23px;FLOAT:left}
.bannerImg{POSITION:relative;PADDING-BOTTOM:0px;MARGIN:0px;PADDING-LEFT:0px;WIDTH:925px;PADDING-RIGHT:0px;FLOAT:left;PADDING-TOP:0px}
.bannerImg .bannerPage{POSITION:absolute;TOP:300px;LEFT:420px}
.bannerImg .bannerPage A{MARGIN-RIGHT:2px}
.bannerImg .bannerPage A IMG{VERTICAL-ALIGN:middle}
.slides_container{POSITION:relative;WIDTH:925px;OVERFLOW:hidden}
.pagination{MARGIN:26px auto 0px}
.pagination LI{MARGIN:0px 1px;FLOAT:left}
.pagination LI A{BACKGROUND-IMAGE:url(../images/pagination.png);WIDTH:15px;DISPLAY:block;BACKGROUND-POSITION:0px -1px;FLOAT:left;HEIGHT:0px;OVERFLOW:hidden;PADDING-TOP:12px}
.pagination LI.current A{BACKGROUND-POSITION:0px -18px}

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