我想创建一个基本上是一个巨大的内容滑块的网站,在页面加载时,你会看到第1部分(基本上是整个屏幕),然后你可以单击向下箭头转到第2页等,当你到达第2页时,我也希望能够向左和向右(仅在第2页上),把它想象成一个图像。滑块,但带分隔符。
我知道有插件可用,但我很喜欢自己写,我已经写了一些(基本的)jquery,它确实有效,但它似乎太膨胀了,我想要一种更好/更有效的方式来完成它。我所追求的是如何最好地处理这一点,我不是在寻找代码,因为我想学习和变得更好,但我想不出解决这一问题的最佳方法,是否可以使用某种switch语句?你打算怎么做?
我还需要某种方法来确保你不能滚动超过div的数目,我目前正在使用一个var和if语句,但是我觉得必须有一种方法将每个人组合成一个简单的函数?
JS在下面,还有一个JSfiddle
谢谢!
http://jsfiddle.net/W4SVz/
$(function () {
var box = $('.box');
TriggerClick = 0;
$("#down").click(function(){
var height = $('.box').outerHeight();
if(TriggerClick == 0){
TriggerClick = 1;
$(box).stop().animate({top:'-='+height}, 500);
}else if(TriggerClick == 1){
TriggerClick = 2;
$(box).stop().animate({top:'-='+height}, 500);
}
});
$("#up").click(function(){
var height = $('.box').outerHeight();
if(TriggerClick == 2){
TriggerClick = 1;
$(box).stop().animate({top:'+='+height}, 500);
}else if(TriggerClick == 1){
TriggerClick = 0;
$(box).stop().animate({top:'+='+height}, 500);
}
});
$("#left").click(function(){
var height = $('.box').outerHeight();
if(TriggerClick == 1){
$(box).stop().animate({left:'-='+height}, 500);
}
});
$("#right").click(function(){
var height = $('.box').outerHeight();
if(TriggerClick == 1){
$(box).stop().animate({left:'+='+height}, 500);
}
});
});
最佳答案
作为免责声明,你自己做一个并不是一个好主意。
在不同的浏览器上可能会遇到许多兼容性问题。
不过,为了学习的目的,我很高兴与你分享我的一些小知识。
我经常使用Kelvin Luck的jQuery插件jscrollPane。
它是一个轻量级的可配置插件。
在我看来,这也将是一篇有趣的文章供你学习。
您可以在此处找到代码:http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js
这里是这个插件的一个非常简单的用法。你也可以看看
http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html
据我所知,它充分利用了jquery事件系统。
请随意理解…也许可以改进一下;—)
玩得高兴!