0 
<script type="text/javascript">
$(document).ready(function() {



    var $item = $('div.imgItem'), //Cache your DOM selector
        visible = 1, //Set the number of items that will be visible
        index = 0, //Starting index
        endIndex = ( $item.length / visible ) - 1, //End index
        imgIndex = 1; 

    $('div#imageItem' + imgIndex).click(function(){
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    });

});

我正在尝试创建幻灯片..我的问题是变量 imgIndex 在函数内部递增，但是第二次调用该函数时，imgIndex 的值仍然是 0.. 有人可以帮我解决这个问题.. 我想要每次作为参数传递的递增值..

@jfriend00 这是我的 html

<div class="imgItem" id="imgItem0">
</div>
<div class="imgItem" id="imgItem1">
</div>
<div class="imgItem" id="imgItem2">
</div>
<div class="imgItem" id="imgItem3">
</div>
<div class="imgItem" id="imgItem4">
</div>

每个 div 中都会加载一个图像。当我创建一个滑块时，我想单击下一个图像来滑动它。这就是为什么我为 div 使用不同的 id 的原因。

现在你能告诉我应该如何改变这条线

$('div#imageItem' + imgIndex).click(function(){
4

2 回答 2

0

代码行：

$('div#imageItem' + imgIndex).click(function(){

似乎是唯一正在使用的代码行，imgIndex它只运行一次，因此它只会以 for 的初始值执行0一次imgIndex。

如果您希望它执行多次，那么您要么需要在.click()处理程序中再次执行它，要么创建一个for循环以使用多个值多次执行它，或者您需要设置不同类型的事件处理，其中您的初始事件处理程序适用于许多对象。

我们必须查看您的 HTML 并更多地了解您要完成的工作，才能知道哪条路径是最好的。

如果您想要多个对象的单击处理程序，那么最好在它们上放置一个通用类名，以便您可以像这样设置事件处理程序：

$('.imageItemCommon').click(function(){{/* code here */});

或者，如果这些是动态创建的元素，则使用委托事件处理：

$(static parent selector).on('.iamgeItemCommon', 'click', function() {/* code here */});

PS 没有理由使用'div#imageItem0'，而不仅仅是'#imageItem0'作为选择器。添加 'div' 部分只会减慢选择器引擎的速度，并且由于 id 在文档中是唯一的，因此您不需要将其作为过滤器的一部分。

好的，既然您已经展示了实际的 HTML，我建议您使用这种形式的事件处理程序，因为这适用于所有幻灯片（不需要 id）：

// advance to next slide on click
$(".imgItem").click(function() {
    // use $(this) to refer to the currently clicked on slide

});

而且，这是我认为做这种动画的更简单的方法：

var imgsNum = $(".imgItem").length
var imgWidth = 200;

$(".slideHolder").click(function() {
    var holder = $(this);
    var slideNum = -parseInt(holder.css("left"), 10) / imgWidth;
    if ((slideNum + 1) < imgsNum) {
        holder.animate({left: "-=" + imgWidth + "px"}, 1000);
    } else {
        holder.animate({left: "0"}, 1000);
    }
});

在此处使用 HTML 和 CSS 进行演示：http: //jsfiddle.net/jfriend00/AZ7NY/

于 2013-03-15T20:04:42.653 回答
0

您的选择器：

$('div#imageItem' + imgIndex)

只创建一次，当imgIndex=1. 您需要创建更通用的东西：

$('div[id^=imageItem]').click(function(){
    if ('imageItem'+imgIndex === this.id) {
        if (index == 0 || index == (endIndex-1))
        {
            var animatePX = imgWidth * .85 + 2;
        }
        else
        {
            var animatePX = imgWidth * .9 + 2;
        }

        if(index < endIndex ){
          index++;
          imgIndex++;
          //alert (imgIndex);
          $item.animate({'left':'-='+animatePX});
        }
    }
});
于 2013-03-15T20:06:34.507 回答