Question

我知道那里有很多滑块，我想要做的就像Coda-Slider，但是我想学习JavaScript（jQuery）并使用我所拥有的而不是将所有HTML代码更改为现有的滑块所需的语法。

我最大的问题之一就是我认为简单的事情过于复杂，并且期望很容易解决复杂的问题。

var shopContent = $('div.tx-jfmulticontent-pi1');
var shopTrigger = $('div.shop-items > div');

for(var i=0; i < shopTrigger.length; i++) {
    $(shopTrigger[i]).click(function(){
        $(shopContent[i]).slideUp();                              
    });
}

我的想法是：使用点击的项目（触发器div）索引号来使用相应的索引为内容div设置动画。显然，当我用console.log检查i的值时，我得到12（触发项的数量），因为for循环快速运行！

如果你能给我一些指导我应该开始学习如何解决这些问题，我将非常感激。不确定，也许我必须回到JavaScript的基础知识，但大多数时候，我可以绘制一个方案需要什么样的事件和动作，但我完全厌恶将其转换为代码。

感谢您提供任何帮助和建议！

Answer 1

DEMO： http://jsbin.com/odeta3/2

这是一个非常简洁的演示，但你可以得到这个想法

您可以使用

轻松完成此操作

<div id="container">
<div id="display-image"></div>
<ul id="display-thumbs">
<li><img /></li><li><img /></li><li><img /></li><li><img /></li>
</ul>
</div>

$(function() {  
  $('#display-thumbs li img:first').clone(true).appendTo('#display-image');  
    $('#display-thumbs li img').click(function() {
        var image = this.src;
        $('#display-image img').animate({
            'top': '-425px'
        },
        500,function() {
            $(this).remove();
            $('<img></img>').attr('src', image).css('top', '425px').appendTo('#display-image').animate({
                'top': '0'
            },
            500);
        });
    });
});

jquery滑块逻辑

1 个答案: