Question

我想制作一个动态滑块。我正在使用Slider Pro。

这是我的结构：

的jQuery

$(".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);
});

HTML：

<div class="slider-pro" id="carousel">
    <ol class="carousel-menu">
        <a class="item-0" href="#carousel/0">
            <li>Yatching</li>
        </a>
        <a class="item-1" href="#carousel/1">
            <li>Aviation</li>
        </a>
        <a class="item-2" href="#carousel/2">
            <li>Automobile</li>
        </a>
        <a class="item-3" href="#carousel/2">
            <li>Watchmaking</li>
        </a>
    </ol>

    <div class="sp-slides">
        <!-- Slide 1 -->
        <div class="sp-slide">
            <img class="sp-image" src="path/to/image1.jpg" />
        </div>

        <!-- Slide 2 -->
        <div class="sp-slide">
            <p>Lorem ipsum dolor sit amet</p>
        </div>

        <!-- Slide 3 -->
        <div class="sp-slide">
            <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
            <p class="sp-layer">consectetur adipisicing elit</p>
        </div>

        <!-- Slide 4 -->
        <div class="sp-slide">
            <h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
            <p class="sp-layer">consectetur adipisicing elit</p>
        </div>
    </div>
</div>

我希望将它悬停在.item-0的每个“a”上我们转到幻灯片0，.item-1转到幻灯片1，.item-2转到幻灯片2等。 ..所以我尝试了更有活力的东西：

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

Answer 1

对所有元素使用公共类item而不是item-n，如果不可能，您可以使用attribute starts with selector $('[class^=item]')选择其类选择{{1}的所有元素1}}。我还建议将其用作item，以避免在页面上选择其他匹配元素。
不是单独为所有元素重复代码，而是使用index添加公共事件处理程序，如下所示：
```
$('#carousel').find('[class^=item]')
```

使滑块动态化

1 个答案: