谷歌浏览器初始页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 href="css/zzsc.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script> 
</head>
<body>
<div id="wrap">
    <div id="scroll_box">
        <div class="box_163css pr">
            <ul class="roll_ul">
                <li>
                	<div class="weblist">
                    	<a href="#"><img src="images/img01.gif" /></a>
                        <a href="#"><img src="images/img02.gif" /></a>
                        <a href="#"><img src="images/img03.gif" /></a>
                        <a href="#"><img src="images/img04.gif" /></a>
                        <a href="#"><img src="images/img01.gif" /></a>
                        <a href="#"><img src="images/img02.gif" /></a>
                        <a href="#"><img src="images/img03.gif" /></a>
                        <a href="#"><img src="images/img04.gif" /></a>
                    </div>
                </li>
                <li>
                	<div class="weblist">
                    	<a href="#"><img src="images/img01.gif" /></a>
                        <a href="#"><img src="images/img02.gif" /></a>
                        <a href="#"><img src="images/img03.gif" /></a>
                        <a href="#"><img src="images/img04.gif" /></a>
                    </div>
                </li>
                <li>
                	<div class="weblist">
                    	<a href="#"><img src="images/img01.gif" /></a>
                        <a href="#"><img src="images/img02.gif" /></a>
                        <a href="#"><img src="images/img03.gif" /></a>
                        <a href="#"><img src="images/img04.gif" /></a>
                    </div>
                </li>
            </ul>
            
        </div>
        <a href="#163css" class="prev pa none" id="banner_prev"></a>
        <a href="#163css" class="next pa" id="banner_next"></a>
    </div>
   <div class="scroll_nav">
        <b class="current">常去网站</b>
        <b>应用</b>
        <b>产品</b>
    </div>
</div>
<script type="text/javascript">
$(function(){		
		var w=100+"%";
		var n=$('.roll_ul li').size();
		$('.roll_ul').width(100*n+"%");
		$('.roll_ul li').width(100/n+"%");
		var t=0;
		$('#banner_next').bind('click',function(){
			t++;
			$('#banner_prev').show();
			var f=$('.roll_ul').css('left');
			$('.roll_ul').animate({'left':'-=100%'},300);			
			if(t==n-1){
				$('#banner_next').hide()
			}
			$('.scroll_nav b').eq(t).siblings().removeClass('current');
			$('.scroll_nav b').eq(t).addClass('current');
		})
		$('#banner_prev').click(function(){
			t--;
			$('#banner_next').show();
			var l=$('.roll_ul').css('left');
			$('.roll_ul').animate({'left':'+=100%'},300)	
			if(t==0){
				$('#banner_prev').hide()
			}
			$('.scroll_nav b').eq(t).siblings().removeClass('current');
			$('.scroll_nav b').eq(t).addClass('current');
		})
		$('.scroll_nav b').each(function(i){
			$(this).click(function(){
				i=$(this).index();
				$('#banner_prev').show();
				if(i==0){
					$('#banner_prev').hide();
					$('#banner_next').show();	
				}
				if(i==n-1){
					$('#banner_next').hide();	
				}
				var cd=-100*i+"%";
				$('.roll_ul').animate({'left':cd},500);	
				$(this).siblings().removeClass('current');
				$(this).addClass('current')
			})
		})		
})
</script>
</body>
</html>

CSS代码(zzsc.css):

/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
html{height:100%;}
.pr{position:relative;}
.pa{position:absolute;}
.none{display:none;}
#wrap{width:100%;position:relative;height:100%;}
#scroll_box{width:100%;overflow:hidden;}
.box_163css{width:100%;position:relative;height:720px;overflow:hidden;}
.roll_ul{position:absolute;left:0;top:10%;}
.roll_ul li{float:left;}
.weblist{width:85%;margin:0 auto;top:-20%;}
.weblist a{display:block;float:left;display:inline;width:20%;height:15%;overflow:hidden;margin:0 0 3% 3%;}
.weblist img{width:100%;display:block;}
.prev,.next{cursor:pointer;width:8%;height:100%;_height:720px;top:0;}
.prev{left:0;background:url(../images/arrow_l.png) no-repeat center 44%;}
.prev:hover{background:#efefef url(../images/arrow_l.png) no-repeat center 44%;}
.next{right:0;background:url(../images/arrow_r.png) no-repeat center 44%;}
.next:hover{background:#efefef url(../images/arrow_r.png) no-repeat center 44%;}
.scroll_nav{width:100%;text-align:center;padding-top:10px;height:39px;overflow:hidden;background:#ededed;border-top:1px solid #d7d7d7;position:absolute;left:0;text-align:center;bottom:0;}
.scroll_nav b{width:80px;border-top:5px solid #d5d5d5;color:#999;display:inline-block;height:30px;margin-right:12px;line-height:30px;cursor:pointer;}
.scroll_nav b.current{border-top:5px solid #7f7f7f;color:#7f7f7f;}

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