全屏页面往下往上滚动切换页面

最新推荐文章于 2022-09-06 09:19:36 发布

云教主

最新推荐文章于 2022-09-06 09:19:36 发布

阅读量5.5k

点赞数 1

分类专栏：代码文章标签： banner jquery 切换

本文链接：https://blog.csdn.net/feng1262558589/article/details/52587977

版权

代码专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>全屏滚动</title>
<script src='js/jquery-1.11.3.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<style>
body{overflow:hidden;}
.main{width:100%;height:100%;position:relative;}
.main .page{width:100%;position:absolute;left:0;right:0;}
.page1 { background-color: #1bbc9b;top:0;}
.page2 { background-color: #FF7F50;top:100%;}
.page3 { background-color: #4BBFC3;top:200%;}
.page4 { background-color: #f90;top:300%;}
p.title { position: relative; top: 35%; font: 700 40px "Microsoft Yahei"; color: #fff; text-align: center;}
.pagination{position:fixed;top:50%;right:10px;z-index:2; transform:translateY(-50%);}
.pagination li{margin-top:4px;width:4px;height:4px;padding:10px;cursor:pointer;}
.pagination li:before{content: ''/*重要*/;display:block;position:absolute;width:4px;height:4px;background-color:#333;border-radius:50%;}
.pagination li.active:before{width:10px;height:10px;border-radius:50%;border:1px solid #333;background:none;left:6px;}
</style>

</head>

<body>
<div class="main">
<div class="page page1">
<p class="title">第一屏</p>
</div>
<div class="page page2">
<p class="title">第二屏</p>
</div>
<div class="page page3">
<p class="title">第三屏</p>
</div>
<div class="page page4">
<p class="title">第四屏</p>
</div>
</div>
<ul class="pagination"></ul>
<script>
$(function(){
var pagewin = $(window).width();
var pagehei = $(window).height();
$('body,.main,.page').css({"width":pagewin}).css({"height":pagehei});
var len = $('.page').length;
var num = 0;//在哪页
var numjia=0;//重要必须有的。。防止多次滚动事件发生/*每次滚动鼠标时都是很“凶残”的一下子滚动很大一个幅度，而不是一小格一小格的慢慢滚动，这就导致了滚动的时候会多次触发onmousewheel事件，*/
var done = true;/*重要必须有的。。做个变量 var done=true ,scrollFunc事件里第一步就判断done为true时继续运行,否则跳出.animate之前或之后done=false(从此,事件无效)
animate增加一个callback,使done=true(也就是动画结束,事件会继续有效)。也就是不写done那么scrollFunc事件只会执行一次。*/
for(var i=0;i<len;i++){
$('.pagination').append("<li></li>")
}
$('.pagination').find('li').eq(0).addClass('active');
$('.pagination li').click(function(){
num=$(this).index();
$('.main').stop().animate({marginTop:-num*pagehei},1000);
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
});
function xia(){
if(num < len-1 && done){//不在最后一页的时候
num++;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在最后一页的时候
num=0;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function shang(){
if(num > 0 && done){//不在第一页的时候
num--;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}else if(done){//在第一页的时候
num=len-1;
numjia++;
done=false;
if(numjia==1){//只有在滚轮滚动一次时才执行下面的。
$('.main').stop().animate({marginTop:-num*pagehei},1000,function(){done=true;numjia=0;});
}
}
}
function scrollFunc(e){
e = e || window.event; //给e赋值event对象
if(e.wheelDelta){//IE/Opera/Chrome 情况时执行
if(e.wheelDelta <= -120){//判断滚轮是否下滚
xia();
}else if(e.wheelDelta >= 120){//判断滚轮是否往上滚动
shang();
}
}else if(e.detail){//火狐情况时执行
if(e.detail >=3){//滚轮往下滚动时
xia();
}else if(e.detail <=-3){//判断滚轮是否往上滚动
shang();
}
}
$('.pagination').find('li').eq(num).addClass('active').siblings().removeClass('active');
}
//注册事件
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//火狐浏览的事件绑定方式
window.onmousewheel=document.onmousewheel=scrollFunc;//其他浏览器绑定事件方式如IE/Opera/Chrome
})
</script>
</body>
</html>

云教主

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
全屏页面往下往上滚动切换页面

全屏滚动body{overflow:hidden;}.main{width:100%;height:100%;position:relative;}.main .page{width:100%;position:absolute;left:0;right:0;}.page1 { background-color: #1bbc9b;top:0;}.page2 { ba
复制链接

扫一扫