Question

我使用Slider Pro插件，我希望动态化我的jquery代码以允许我添加幻灯片，而不必每次添加新的代码行，我可以帮忙吗？

在我写的每个代码中＆＃34; item - ＆＃34;允许在鼠标悬停时转到幻灯片，但它有点重复。

$(".item-0").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 0);
});
$(".item-1").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 1);
});
$(".item-2").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 2);
});
$(".item-3").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 3);
});
$(".item-4").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 4);
});
$(".item-5").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 5);
});
$(".item-6").mouseover(function() {
    $('#carousel').sliderPro('gotoSlide', 6);
});

Answer 1

尝试使用for循环，如果您多次使用它，最好缓存DOM元素var $carousel = $('#carousel');：

var itemNumber = 6; //number of items
var $carousel = $('#carousel');

for(var i = 0; i <= itemNumber; i++)
{

    $(".item-" + i).mouseover(function() {
        $carousel.sliderPro('gotoSlide', i);
    });

}

避免重复动态旋转木马

1 个答案: