Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/88.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 简单jquery滑块_Javascript_Jquery_Slider - Fatal编程技术网

Javascript 简单jquery滑块

Javascript 简单jquery滑块,javascript,jquery,slider,Javascript,Jquery,Slider,我正在使用mousewheel jQuery插件并尝试创建一个简单的滑块。下面是一个示例,但滑块“下一步”和“上一步”按钮工作不正常 $('.container')。鼠标滚轮(函数(事件,增量){ 这个.scrollLeft-=(增量*40); event.preventDefault(); }); //下一个和上一个选项 //上 $('.prev')。单击(函数(){ $('.storepos').val($('.storepos').val()/1-110); $('.container'

我正在使用mousewheel jQuery插件并尝试创建一个简单的滑块。下面是一个示例,但滑块“下一步”和“上一步”按钮工作不正常

$('.container')。鼠标滚轮(函数(事件,增量){
这个.scrollLeft-=(增量*40);
event.preventDefault();
});
//下一个和上一个选项
//上
$('.prev')。单击(函数(){
$('.storepos').val($('.storepos').val()/1-110);
$('.container').animate({scrollLeft:$('.storepos').val()},200);
});
//下一个
$('.next')。单击(函数(){
$('.storepos').val($('.storepos').val()/1+110);
$('.container').animate({scrollLeft:$('.storepos').val()},200);
});
.container{overflow-x:scroll}
.content{宽度:1600px}
.项目{背景:黑色;
颜色:白色;
左边距:10px;
宽度:100px;
高度:100px;
浮动:左;
文本对齐:居中
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
/ 

通过storepos元素的if语句,在onclick函数中检查值

上一个按钮

$('.prev').click(function(){
    var storepos = $(".storepos").val();
    if(storepos == 0){
        //Do nothing
    }else{
        $('.storepos').val($('.storepos').val() / 1 - 110);
        $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
    }
});
下一步按钮

$('.prev').click(function(){
    var storepos = $(".storepos").val();
    if(storepos == 0){
        //Do nothing
    }else{
        $('.storepos').val($('.storepos').val() / 1 - 110);
        $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
    }
});
已更新

$('.next').click(function(){
    var storepos = $(".storepos").val();
    var maxLength = (($(".items").length * 110) / 2);
    if(storepos == maxLength){
        //Do nothing
    }else{
        $('.storepos').val($('.storepos').val() / 1 + 110);
        $('.container').animate({scrollLeft:$('.storepos').val()}, 200);
    }
});

在onclick函数中通过storepos元素的if语句检查值。它应该可以工作是的,但是如何修复它呢?我是javascript新手。同样,只需使用550值,因为您可以看到第10个元素的值是550No,我不希望这样。还有其他选择吗?你说的“我不想那样”是什么意思?我创建了一个动态添加或删除项目选项,所以“下一步”按钮需要自动检测。我想你明白了。所以很容易计算。。。计算元素的数量,然后乘以110=最大长度的值