为了账号安全,请及时绑定邮箱和手机立即绑定

哪位大佬能帮我看一下,只能滑到第二页怎么解决

HTML代码:

 <!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>全屏切换效果</title>


<style type="text/css">

  *{

padding: 0;

margin: 0;

/*overflow:hidden;*/

}

html,body{

height: 100%;/*//全屏要素:1全屏的元素及其父元素都要设置*/

             /*//height为100%,HTML和body标签设置height为100%*/

overflow:hidden;

}

#container,.sections,.section{

height: 100%;

/*position: relative;*/

}

#section0,

#section1,

#section2,

#section3{

background-color: #000;

background-size: cover;

background-position: 50% 50%;

text-align:center;/*//使背景图始终位于屏幕的中心*/

color:white;

}

#section0{

background-image: url(images/1.jpg);

}

#section1{

background-image: url(images/2.jpg);

}

#section2{

background-image: url(images/3.jpg);

}

#section3{

background-image: url(images/4.jpg);


}

/*.left{

float:left;

width:25%;

}*/


</style>

</head>

<body>

<div id="container"  data-PageSwitch>

<div class="sections">

<div class="section  active" id="section0">

<div class="intro">

<h1 class="title">switchPage</h1>

<p>Create Beautiful Fullscreen Scrolling Websites</p>

</div>

</div>

<div class="section " id="section1">

<div class="intro">

<h1 class="title">Example</h1>

<p>HTML markup example to define 4 sections</p>

</div>

</div>

<div class="section " id="section2">

<div class="intro">

<h1 class="title">Example</h1>

<p>The plug-in configuration parameters</p>

</div>

</div>

<div class="section " id="section3">

<div class="intro">

<h1 class="title">THE END</h1>

<p>Everything will be okay in the end. If it's not okay, it's not the end.</p>

</div>

</div>

</div>

</div>

<!-- <script type="text/javascript" src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script>

<script type="text/javascript" src="pageswitch.js"></script> -->

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

<script type="text/javascript" src="js/indexjs.js"></script>

</body>

</html> 


js代码:

(function($){

/*说明:获取浏览器前缀*/

/*实现:判断某个元素的css样式中是否存在transition属性*/

/*参数:dom元素*/

/*返回值:boolean,有则返回浏览器样式前缀,否则返回false*/

var _prefix=(function(temp){

var aPrefix = ["webkit", "Moz", "o", "ms"],

props = "";

for(var i in aPrefix){

props = aPrefix[i] + "Transition";

if(temp.style[ props ] !== undefined){

return "-"+aPrefix[i].toLowerCase()+"-";

}

}

return false;

})(document.createElement(pageswitch));


//定义pageswitch对象

var pageswitch = (function(){

function pageswitch(element, options){

this.settings = $.extend(true, $.fn.pageswitch.defaults, options||{});

this.element = element;

this.init();

}

pageswitch.prototype={

/*说明:初始化插件*/

/*实现:初始化dom结构,布局,分页及绑定事件*/

init : function(){

var me = this;

me.selectors = me.settings.selectors;

me.sections = me.element.find(me.selectors.sections);

me.section = me.sections.find(me.selectors.section);


me.direction = me.settings.direction == "vertical" ? true : false;

me.pagesCount = me.pagesCount();

me.index = (me.settings.index >= 0 && me.settings.index < pagesCount) ? me.settings.index : 0;


me.canScroll = true;


if(!me.direction){

me._initLayout();

}


if(me.settings.pagination){

me._initPaging();

}


me._initEvent();

},

/*说明:获取滑动页面数量*/

pagesCount : function(){

return this.section.length;

},


/*说明:获取滑动的宽度(横屏滑动)或高度(竖屏滑动)*/

switchLength : function(){

return this.direction ? this.element.height() : this.element.width();

},


/*说明:向前滑动即上一页*/

prve : function(){

var me = this;

if(me.index > 0){

me.index--;

}else if(me.settings.loop){

me.index = me.pagesCount - 1;

}

me._scrollPage();

},

/*说明:向后滑动即下一页*/

next : function(){

var me = this;

if(me.index < me.pagesCount){

me.index ++;

}else if(me.settings.loop){

me.index = 0;

}

me._scrollPage();

},


/*说明:主要针对横屏情况进行页面布局*/

_initLayout : function(){

// var me = this;

// var width=(me.pagesCount*100)+"%";

    //             var cellWidth=(100/me.pagesCount).toFixed(2)+"%";//保持两位小数toFixed(2)

    //             me.sections.width(width);

    //             me.section.width(cellWidth).css("float", "left");

                var me = this;

if(!me.direction){

var width = (me.pagesCount * 100) + "%",

cellWidth = (100 / me.pagesCount).toFixed(2) + "%";

me.sections.width(width);

me.section.width(cellWidth).css("float", "left");

}

if(me.index){

me._scrollPage(true);

}

},


            /*说明:实现分页的dom结构及其css样式*/

_initPaging : function(){

var me = this,

pagesClass = me.selectors.page.substring(1);//截取字符串从1开始到结尾

me.activeClass = me.selectors.active.substring(1);


var pageHtml = "<ul class="+pagesClass+">";

for(var i = 0 ; i < me.pagesCount; i++){

pageHtml += "<li></li>";

}

pageHtml+="</ul>";

me.element.append(pageHtml);//动态插入分页结构

var pages = me.element.find(me.selectors.page);

me.pageItem = pages.find("li");

me.pageItem.eq(me.index).addClass(me.activeClass);


if(me.direction){

pages.addClass("vertical");

}else{

pages.addClass("horizontal");

}

},



/*说明:初始化插件事件*/

_initEvent : function(){

var me = this;

/*绑定分页click事件*/

me.element.on("click", me.selectors.pages + " li", function(){

me.index = $(this).index();

me._scrollPage();

});

/*绑定鼠标滚轮事件*/

me.element.on("mousewheel DOMMouseScroll", function(e){

if(me.canScroll){

var delta = e.originalEvent.wheelDelta || -e.originalEvent.detail;

if(delta > 0 && (me.index && !me.settings.loop || me.settings.loop)){

me.prve();

}else if(delta < 0 && (me.index < (me.pagesCount-1) && !me.settings.loop ||me.settings.loop)){

me.next();

}

 }

   });


                //绑定键盘事件

if(me.settings.keyboard){

$(window).on("keydown",function(e){

var keyCode = e.keyCode;

if(keyCode == 37 || keyCode == 38){//左键上键

me.prve();

}else if(keyCode == 39 || keyCode == 40){//右键下键

me.next();

}

});

}


/*绑定窗口改变事件*/

/*为了不频繁调用resize的回调方法,做了延迟*/

$(window).resize(function(){


var currentLength=me.switchLength();//获取当前页面的高度

var offset = me.settings.direction ? me.section.eq(me.index).offset().top : 

  me.section.eq(me.index).offset().left;//当前页面距离文档的坐标值

if(Math.abs(offset) > currentLength/2 && me.index < (me.pagesCount - 1)){

me.index++;

}

if(me.index){

me._scrollPage();

}

});


/*支持CSS3动画的浏览器,绑定transitionend事件(即在动画结束后调用起回调函数)*/

// if(_prefix){

me.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function(){

me.canScroll = true;

if(me.settings.callback && $.type(me.settings.callback) == "function"){

me.settings.callback();

}

});

},


/*滑动动画*/

_scrollPage : function(){

var me = this;

var dest = me.section.eq(me.index).position();

if(!dest) return;


me.canScroll = false;


if(_prefix){

var translate = me.direction ? "translateY(-"+dest.top+"px)" : "translateX(-"+dest.left+"px)";

me.sections.css(_prefix+"transition", "all" + me.settings.duration + "ms " + me.settings.easing);

me.sections.css(_prefix+"transform" , translate);

}else{

var animateCss = me.direction ? {top : -dest.top} : {left : -dest.left};

me.sections.animate(animateCss, me.settings.duration, function(){

me.canScroll = true;

if(me.settings.callback && $.type(me.settings.callback) == "function"){

me.settings.callback();


}

});

}

if(me.settings.pagination){

me.pageItem.eq(me.index).addClass(me.activeClass).siblings("li").removeClass(me.activeClass);

}

},

};

return pageswitch;

    })();



    //单例模式

$.fn.pageswitch=function(options){//传入参数

return this.each(function(){//

var me=$(this),

    instance=me.data("pageswitch");//存放插件实例

    if(!instance){//判断实例是为为空,空则创一个实例存放在me.data

instance=new pageswitch(me,options);

me.data("pageswitch",instance);

}

if($.type(options)==="string") return instance[options]();

// $("div").pageswitch("init");//这样就可以调用init方法

      });

};


$.fn.pageswitch.defaults = {

selectors : {

sections : ".sections",

section : ".section",

page : ".pages",

active : ".active",

},

index : 0, //页面开始的索引

easing : "ease", //动画效果

duration : 500, //动画执行时间

loop : false, //是否循环切换

pagination : true, //是否进行分页

keyboard : true, //是否触发键盘事件

direction : "vertical", //滑动方向vertical竖屏,horizontal横向

callback : "" //回调函数

};


$(function(){

$("[data-PageSwitch]").pageswitch();//配置插件


});


})(jQuery);




正在回答

举报

0/150
提交
取消

哪位大佬能帮我看一下,只能滑到第二页怎么解决

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信