Question

我在Jquery中有一个基本的滑块，包含一个left_arrow和一个right_arrow div，它们都控制包含long .png的#screens div的“left”值。每个屏幕的宽度为543像素。

$pr('#arrow_left').click(function () {
    $pr('#screens').animate ({"left": "+=543px"}, "fast"); 
});
$pr('#arrow_right').click(function () {
    $pr('#screens').animate ({"left": "-=543px"}, "fast");
});

幻灯片操作正常，但我想为#screens'left'值设置最小值和最大值，这样箭头就不会让用户超出图像的任何一个方向。

Answer 1

var max = 543 * 10; //10 slides, for example
var current = 0;
$pr('#arrow_left').click(function () {
    if(current < 0)
    {
        current += 543;
        $pr('#screens').animate ({"left": current + "px"}, "fast"); });

    }
});

$pr('#arrow_right').click(function () {
    if(current > max)
    {
        current -= 543;
        $pr('#screens').animate ({"left": current + "px"}, "fast");

    }
});

Answer 2

Kai Qing的答案很棒:)我根据自己的需要对其进行了修改，并为max变量添加了jQuery，因此它将根据直接子<div>＆＃39的数量而变化; s滑块具有以下功能，因此您无需在设置后编辑它：）

我只是将代码段留在这里，以防有人需要它：p

$(document).ready(function(){
var max = 275 * $('.slider-wrap > div').length; //change div to whatever element wraps each individual piece of content you're sliding.
var current = 0;
$('.left').click(function () {
if(current < max){
    alert(current);
    current += 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});
$('.right').click(function () {
if(current > 0){
    alert(current);
    current -= 275;
    $(".slider-wrap").animate({marginLeft:current + 'px'},'slow'); 
    }
});

}）;

在Jquery中设置.animate的边界

2 个答案: