學習了下老師的思路 用自己的方法寫了一下
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title></title>
??? <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<style>
??? html,body{
??????? height: 100%;
??????? overflow: hidden;
??????? background: #CCC;
??? }?? ?
??? img{
??????? width: 100%;
??????? height: 100%;
??? }
??? #page{
??????? width: 100%;
??????? position: absolute;
??? }
</style>
<script>
??? $(function(){
??? var $show=$(".show");
??? var $page=$("#page");
??? var i = 0;//紀錄當前所顯示頁面
??? //根據(jù)大div的個數(shù)動態(tài)設置page的的高度
??? $page.css("height",$show.length*100+"%");
??? //動態(tài)的平均分配每個show的高度
??? $show.css("height",100/$show.length+"%");
??? //改寫鼠標滾輪事件
??? $(document).on("mousewheel DOMMouseScroll",go);//將鼠標滾動事件改為執(zhí)行go函數(shù)
??? function go(e){
??????? e.preventDefault();//取消默認行為
??????? var value = e.originalEvent.wheelDelta || -e.originalEvent.detail;//后者為火狐鼠標滾動事件屬性
?????? ?
?????? //鼠標向下滑動
??????? if(value>0 && $page.offset().top>-$show.eq(0).height()*($show.length-1) && !$page.is(":animated")){
??????????? $show.eq(i+1).css("opacity",1);
??????????? $page.animate({top:"+="+(-$show.eq(0).height())+"px"},1000);
??????????? $show.eq(i).animate({opacity:0.4},1000);
??????????? i=i+1;
????????????????????????? }
??????? //鼠標向上滑動
??????? else if(value<0 && $page.offset().top<0 && !$page.is(":animated")){
??????????? $show.eq(i-1).css("opacity",1);
??????????? $page.animate({top:"+="+($show.eq(0).height())+"px"},1000);
??????????? $show.eq(i).animate({opacity:0.4},1000);
??????????? i=i-1;
????????????????????????????? }
??? }
??? // 窗口大小改變事件處理
??? $(window).resize(function(){
??????? $page.stop().animate({top:(-$show.eq(0).height()*i)+"px"},1000);
??? })
?????? ?
?? ?
})
</script>
<script></script>
<body>
??? <div id="page">
??????? <div class="show"><img src="http://www.hszfk120.com/statics/js/Antelope%20Canyon.jpg" alt=""></div>
??????? <div class="show"><img src="http://www.hszfk120.com/statics/js/Bahamas%20Aerial.jpg" alt=""></div>
??????? <div class="show"><img src="http://www.hszfk120.com/statics/js/Beach.jpg" alt=""></div>
??????? <div class="show"><img src="http://www.hszfk120.com/statics/js/Blue%20Pond.jpg" alt=""></div>
??? </div>//服務器還沒有備案借用了下以前實習單位的服務器，大家不要亂來。。
</body>
</html>
