jQuery果冻式按钮焦点图轮播滚动切换特效代码

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

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

以下是 jQuery果冻式按钮焦点图轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery果冻式按钮焦点图切换代码</title>
<link rel="stylesheet" href="css/chinaz.css" />
</head>
<body>
<br>
<div class="index_slide">
	<div class="wrap_1005 slide">
		<ul class="slide_con clearfix">
			<li><img src="images/index_slide_con01.png" alt="内容"><a href="#" class="slide_con_a" target="_blank">投放申请</a></li>
			<li><img src="images/index_slide_con02.png" alt="内容"><a href="#" class="slide_con_a" target="_blank">投放申请</a></li>
			<li style="display: block;"><img src="images/index_slide_con03.png" alt="内容"><a href="#" class="slide_con_a" target="_blank">投放申请</a></li>
			<li><img src="images/index_slide_con04.png" alt="内容"><a href="#" class="slide_con_a" target="_blank">投放申请</a></li>
			<li><img src="images/index_slide_con05.png" alt="内容"><a href="#" class="slide_con_a" target="_blank">投放申请</a></li>
		</ul>
		<ul class="slide_index clearfix">
			<li class="one"></li>
			<li class="two"></li>
			<li class="three hover"></li>
			<li class="four"></li>
			<li class="five"></li>
		</ul>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/chinaz.js"></script>
</body>
</html>

JS代码(chinaz.js):

//首页轮播!function(){
	var index_slide=$(".index_slide .slide"),slide_con=index_slide.find(".slide_con li"),slide_index=index_slide.find(".slide_index li");
	var index=2;
	if(index_slide[0]){
	var timer=setInterval(function(){
	index++;
	autoSlide();
}
,4000);
	index_slide.hover(function(){
	clearInterval(timer);
}
,function(){
	timer=setInterval(function(){
	index++;
	autoSlide();
}
,4000);
}
);
	slide_index.mouseover(function(){
	var i=$(this).index();
	index=i;
	autoSlide();
}
);
}
function autoSlide(){
	if(index>=slide_index.length) index=0;
	if($.browser.msie&&parseInt($.browser.version)<=8){
	slide_con.stop(true,true).eq(index).show().siblings().hide();
}
else{
	slide_con.stop(true,true).eq(index).fadeIn("slow").siblings().fadeOut("slow");
}
slide_index.stop(true,true).eq(index).addClass("hover").siblings().removeClass("hover");
}
;
}
();

CSS代码(chinaz.css):

body{background-color:#fff;color:#666;font:14px/1.5 "微软雅黑",tahoma,"SimSun";margin:0 auto;padding:0;text-align:left;}
/* 重置 */
div,form,p,i,img,ul,li,ol,dl,dt,dd,table,tr,td,th,a,span,em,b,fieldset,label,legend,select,figure,button,input,embed{margin:0;padding:0;}
/* 标题样式 */
/*h1,h2,h3,h4,h5,h6,em,b,strong{margin:0;padding:0;font-size:14px;font-weight:normal;font-style:normal;}
*/
em,.news_left_list h3{margin:0;padding:0;font-size:14px;font-weight:normal;font-style:normal;}
h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{margin:0}
/* 列表样式 */
ul,ol,li,dl,dt,dd{list-style:none;}
/* 图片样式 */
img,a img{border:0px;padding:0px;margin:0px;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0;margin:0 auto;}
/* 链接样式 */
a{text-decoration:none;color:#666;transition:color 0.3s ease-out;}
a:visited{text-decoration:none;}
a:hover{text-decoration:none;color:#FF7500;}
.b{background:grey;min-height:10px;}
/* clearfix */
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}
.fl{float:left;}
.fr{float:right;}
.bg_gray{background-color:#f2f2f2;}
.bg_white{background-color:#fafafa;}
.ptb50{padding-top:50px;padding-bottom:50px;}
.pr50p{padding-right:50%;}
.wid50p{width:50%;}
.wrap_1005{width:1005px;display:block;margin:0px auto;position:relative;}
.index_slide{width:100%;height:390px;background:url(img/index_slide_bg.png) no-repeat #DE5F03;position:relative;z-index:2;}
.index_slide .slide{position:relative;overflow:hidden;height:390px;}
.index_slide .slide ul.slide_con{height:328px;position:relative;overflow:hidden;}
.slide ul.slide_con li{position:absolute;_position:relative;top:0px;left:0px;width:100%;height:100%;z-index:2;display:none;}
.slide ul.slide_con li img{height:100%;width:100%;}
.slide ul.slide_con li a.slide_con_a{position:absolute;right:1px;bottom:55px;cursor:pointer;z-index:9;height:49px;width:161px;line-height:49px;text-align:center;background-image:url(img/slide_con_a.png);color:#D43600;font-size:19px;}
.index_slide .slide ul.slide_index{position:absolute;height:64px;width:1005px;left:0px;bottom:0px;}
.index_slide .slide ul.slide_index li{float:left;width:200px;height:56px;margin-right:1px;margin-top:8px;cursor:pointer;box-shadow:2px 1px 0px 0px #DD5D14;transition:all 0.3s;}
.index_slide .slide ul.slide_index li.one{background:url(img/slide_index01.png) no-repeat center center;_background-image:url(img/slide_index01_ie6.png);background-color:rgba(255,255,255,.4);background-color:#FFFFFF\9;filter:alpha(opacity=40);}
.index_slide .slide ul.slide_index li.two{background:url(img/slide_index02.png) no-repeat center center;_background-image:url(img/slide_index02_ie6.png);background-color:rgba(255,255,255,.4);background-color:#FFFFFF\9;filter:alpha(opacity=40);}
.index_slide .slide ul.slide_index li.three{background:url(img/slide_index03.png) no-repeat center center;_background-image:url(img/slide_index03_ie6.png);background-color:rgba(255,255,255,.4);background-color:#FFFFFF\9;filter:alpha(opacity=40);}
.index_slide .slide ul.slide_index li.four{background:url(img/slide_index04.png) no-repeat center center;_background-image:url(img/slide_index04_ie6.png);background-color:rgba(255,255,255,.4);background-color:#FFFFFF\9;filter:alpha(opacity=40);}
.index_slide .slide ul.slide_index li.five{background:url(img/slide_index05.png) no-repeat center center;_background-image:url(img/slide_index05_ie6.png);background-color:rgba(255,255,255,.4);background-color:#FFFFFF\9;filter:alpha(opacity=40);}
.index_slide div.slide ul.slide_index li.hover{height:64px;margin-top:0px;background-color:rgba(255,255,255,.5);filter:alpha(opacity=50);}

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