我想创建一个基本上是一个巨大的内容 slider 的网站,在页面加载时你会看到 div 1(基本上是整个屏幕),然后你可以单击向下箭头转到第 2 页等,当你到达第 2 页我也希望能够左右移动(仅在第 2 页),将其视为图像 slider 但带有 divs..
我知道有可用的插件,但我很喜欢自己编写它,我已经编写了一些(基本的)JQuery,它确实有效,但它看起来太臃肿了,我想要一种更好/更有效的方法来实现它......我之后是解决这个问题的最佳方法,我不是在寻找代码,因为我想学习和变得更好,但想不出解决这个问题的最佳方法,是否可以使用某种开关陈述?你会怎么做?
我还需要一些方法来确保您不会滚动超过 div 的数量,我目前正在使用带有 if 语句的 var,但觉得必须有一种方法可以将每个人组合成一个简单的函数吗?
JS在下面还有一个JSFiddle
谢谢!
$(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 事件系统。 随意理解它......并可能改进它;-)
玩得开心!
关于JQuery 内容 slider - 最佳实践?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15928309/