开发者问题收集

jQuery 滑块逻辑

2011-03-22
1555
javascript jquery arrays slider

我知道市面上有大量的滑块，而我想要做的是类似 Coda-Slider 的东西，但是我想学习 JavaScript（jQuery）并使用我已有的，而不是将所有 HTML 代码更改为现有滑块所需的语法。

我最大的问题之一是，我把简单的事情想得太复杂，并期望复杂的东西能够轻松解决。

sketch 

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 的最基础部分，但大多数时候，我可以绘制一个方案，说明需要什么样的事件和操作，但我完全不擅长将其转化为代码。

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

1个回答

这是一个非常简单的演示，但你可以明白这个想法

你可以很容易地做到这一点，通过使用 

<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);
        });
    });
});
Luca Filosofi
2011-03-22