jquery scroll图片全屏滚动js特效代码

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

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

以下是 jquery scroll图片全屏滚动js特效代码的示例演示效果:

当前平台(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 scrollͼƬȫ������</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>


</head>
<body>

<div class="fixed_r">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</div>
<div class="num_box">
	<div class="num" id="num_0"><p>��1��</p></div>
	<div class="num" id="num_1"><p>��2��</p></div>
	<div class="num" id="num_2"><p>��3��</p></div>
	<div class="num" id="num_3"><p>��4��</p></div>
	<div class="num" id="num_4"><p>��5��</p></div>
	<div class="num" id="num_5"><p>��6��</p></div>
</div>
<input type="hidden" value="0" class="ddw"/>
<input type="hidden" value="0" class="ddw2"/>

<script type="text/javascript" src="js/scroll.js" ></script> 
<script type="text/javascript" src="js/jquery.mousewheel.js" ></script>
</body>
</html>

JS代码(scroll.js):

// JavaScript Document$('.ddw').val(0);
	$('.ddw2').val(0);
	setTimeout(function(){
	$('.num').eq(0).find('p').stop().animate({
	'top':'50%'}
,500)}
,500);
	$(function(){
	$('.num_box').mousewheel(function(event,delta){
	var aaaa=$('.ddw2').val();
	if (aaaa == 1){
	return;
}
qpgd(delta);
}
);
}
);
	function qpgd(a){
	var z =$('.ddw').val();
	b = parseInt(z);
	c = $('.num').length;
	if(a<0){
	if(-b==c-1){
	return;
}
b-=1;
	$('.ddw2').val(1);
}
else if(a>0){
	if(-b==0){
	return;
}
b+=1;
	$('.ddw2').val(1);
}
if(-b==0){
	$('.num').eq(1).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(0).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==1){
	$('.num').eq(0).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(2).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(1).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==2){
	$('.num').eq(1).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(3).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(2).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==3){
	$('.num').eq(2).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(4).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(3).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==4){
	$('.num').eq(3).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(5).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(4).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==5){
	$('.num').eq(4).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(5).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
$('.ddw').val(b);
	$('.fixed_r li').eq(-b).addClass('on').siblings('li').removeClass('on');
	var single_hh = $(window).height();
	click_hh =-single_hh*b;
	$('.num_box').animate({
	'bottom':click_hh}
,1000);
	setTimeout(function(){
	$('.ddw2').val(0);
}
,1400);
}
$('.fixed_r li').eq(0).addClass('on');
	$('.fixed_r li').click(function(){
	var b = $(this).index();
	$(this).addClass('on').siblings('li').removeClass('on');
	$('.ddw').val(-b);
	/*---------------------*/
if(b==0){
	$('.num').eq(1).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(0).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(b==1){
	$('.num').eq(0).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(2).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(1).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(b==2){
	$('.num').eq(1).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(3).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(2).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(b==3){
	$('.num').eq(2).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(4).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(3).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(b==4){
	$('.num').eq(3).find('p').animate({
	'top':'0'}
,500);
	$('.num').eq(5).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(4).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
else if(-b==5){
	$('.num').eq(4).find('p').animate({
	'top':'0'}
,500);
	setTimeout(function(){
	$('.num').eq(5).find('p').animate({
	'top':'50%'}
,500);
}
,1600);
}
/*---------------------*/
var single_hh = $(window).height();
	click_hh =single_hh*b;
	$('.num_box').animate({
	'bottom':click_hh}
,1000);
}
)function quanp(){
	var single_hh = $(window).height();
	var single_ww = $(window).width();
	$('.num').height(single_hh);
	$('.num li').width(single_ww);
}
quanp();
	$(window).resize(function(){
	if (typeof indexSlides != 'undefined' && indexSlides.reformat)indexSlides.reformat();
	quanp();
}
);

CSS代码(css.css):

@charset "utf-8";/* CSS Document */
html{overflow:hidden;}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:12px;color:#000000;word-wrap:break-word;behavior:url("csshover.htc");overflow:hidden;}
button,input,select,textarea{font:12px/1.5 Arial,"宋体",Helvetica,Verdana,sans-serif;word-wrap:break-word;color:#565756;}
ul,li{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
img{border:none;border:0;vertical-align:middle;}
a{text-decoration:none;outline:none;}
p{margin:0;padding:0;}
input,select,textarea{vertical-align:middle;*font-size:100%;}
input{margin:0;outline:none;padding:0;}
input::-ms-clear{display:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{*zoom:1}
.ddw{position:absolute;left:0;top:0;color:#000;font-size:16px;z-index:9999;}
.ddw2{position:absolute;left:20px;top:0;color:#000;font-size:16px;z-index:9999;}
.num_box{position:relative;}
.num{color:#90C;font-size:50px;width:100%;text-align:center;position:relative;}
.num p{position:absolute;top:0;left:50%;margin-left:-66px;}
.num ul{width:100%;position:absolute;left:0;top:0;height:100%;}
.num ul li{float:left;height:100%;position:relative;}
#num_0{background:url(../images/bac1.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_1{background:url(../images/bac2.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_2{background:url(../images/bac3.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_3{background:url(../images/bac1.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_4{background:url(../images/bac2.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_5{background:url(../images/bac3.jpg) no-repeat center #03F;background-size:100% 100%;}
#num_6{background:#0F0;}
#num_7{background:#00F;}
#num_8{background:#FF0;}
#num_9{background:#F0F;}
.fixed_r{position:absolute;right:10px;top:200px;z-index:999;}
.fixed_r li{width:40px;height:40px;background:#fff;border-bottom:1px solid #ccc;line-height:40px;color:#333;font-size:16px;text-align:center;cursor:pointer;}
.fixed_r li.on{background:#0FF;}

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