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=gb2312" />
<title>jquery四格百叶窗焦点图</title>
<link rel="stylesheet" type="text/css" href="css/zzsc.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>

<!--代码开始-->
<div class="box">
	<ul class="inbox">
    	<li class="ad1"></li>
        <li class="ad2"></li>
        <li class="ad3"></li>
        <li class="ad4"></li>
        <a href="#" target="_blank" class="text"><h1>连续阴霾天后现壮美星空</h1><p>漫天的繁星异常壮美</p></a>
        <div class="textbg"></div>
    </ul>
    <ul class="inbox">
    	<li class="ad1"></li>
        <li class="ad2"></li>
        <li class="ad3"></li>
        <li class="ad4"></li>
        <a href="#" target="_blank" class="text"><h1>阴霾天后现星空</h1><p>让人产生穿越时空之感</p></a>
        <div class="textbg"></div>
    </ul> 
    <ul class="inbox">
    	<li class="ad1"></li>
        <li class="ad2"></li>
        <li class="ad3"></li>
        <li class="ad4"></li>
        <a href="#" target="_blank" class="text"><h1>连续阴霾天</h1><p>漫天的繁星产生穿越时空之感</p></a>
        <div class="textbg"></div>
    </ul> 
    <ul class="inbox noborder">
    	<li class="ad1"></li>
        <li class="ad2"></li>
        <li class="ad3"></li>
        <li class="ad4"></li>
        <a href="#" target="_blank" class="text"><h1>内容整理</h1><p>繁星让人产生穿越时空之感</p></a>
        <div class="textbg"></div>
    </ul>       
</div>
</body>
</html>

JS代码(js.js):

$(document).ready(function(){
	$('.inbox').each(function(x){
	$(this).children('li:first').show();
	$(this).children('li').each(function(y){
	$(this).css('background-position',(4 - x) * 250 + 'px 0px');
}
)}
);
	$('.text:first').css('color','#fff');
	$('.text').hover(function(){
	i = $('.text').index($(this));
	$('.text').css('color','#666');
	$('.text').eq(i).css('color','#fff');
	$('.inbox').each(function(x){
	setTimeout(function(){
	$('.inbox').eq(x).children('li').each(function(y){
	if (y == i){
	$(this).fadeIn();
}
else{
	$(this).hide();
}
}
)}
,400-x*100);
}
);
}
)}
)

CSS代码(zzsc.css):

/* ת���뱣���Ȩ��Ϣ������ͼ�� www.lanrentuku.com */
*{padding:0px;margin:0px;}
img{border:none;}
ul,li{list-style:none;}
.box{width:1003px;height:350px;background:#FFF;margin:0px auto;}
.inbox{width:250px;height:350px;border-right:1px solid #FFF;float:left;position:relative}
.inbox li{width:250px;height:350px;position:absolute;top:0px;left:0px;}
.noborder{border:none;}
.ad1{background-image:url(../images/01.jpg);display:none}
.ad2{background-image:url(../images/02.jpg);display:none}
.ad3{background-image:url(../images/03.jpg);display:none}
.ad4{background-image:url(../images/04.jpg);display:none}
.textbg{width:250px;height:50px;background:#000000;opacity:0.5;position:absolute;bottom:0px;z-index:998;cursor:pointer;}
.text{width:230px;height:30px;position:absolute;bottom:0px;color:#666;padding:10px;z-index:999;text-align:right;cursor:pointer;display:block;text-decoration:none;}
.text h1{font-size:14px;font-family:'΢���ź�';font-weight:normal}
.text p{font-size:12px;font-family:'΢���ź�'}

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