Question

我正在尝试创建一个新的滑块，其中包含一个大的幻灯片区域（图片和标题）和左侧的第二个区域，其中包含所有幻灯片的简单列表。

我设法让滑块工作，以便您可以点击其中一个列表项，然后更改幻灯片。

但是，我还希望滑块默认通过所有幻灯片进行动画制作。我想点击列表项来覆盖动画，并使动画循环转到当前幻灯片所在的循环中的点。因此，如果用户点击幻灯片2，下一张要动画的幻灯片将是幻灯片3.我还想将鼠标悬停在幻灯片上以暂停动画。

我是如何实现动画/悬停部分的？我是jQuery的新手，所以非常困惑。

这是我到目前为止所提出的：

    var $newsitem = jQuery('.featured-news');

    var $newsitem1 = jQuery('.featured-news.item-1');
    var $newsitem2 = jQuery('.featured-news.item-2');
    var $newsitem3 = jQuery('.featured-news.item-3');

    var $newslistitem1 = jQuery( '.newslist.item-1' );
    var $newslistitem2 = jQuery( '.newslist.item-2' );
    var $newslistitem3 = jQuery( '.newslist.item-3' );

    // click actions

    $newslistitem1.click(function () {
        $newsitem.hide();
        $newsitem1.fadeIn();        
    });

    $newslistitem2.click(function () {
        $newsitem.hide();
        $newsitem2.fadeIn();        
    });

    $newslistitem3.click(function () {
        $newsitem.hide();
        $newsitem3.fadeIn();        
    });

    // timed actions

animate();

function animate() {

    $newsitem1.delay(4000).hide();
    $newsitem2.delay(4000).fadeIn();
    $newsitem2.delay(4000).hide();
    $newsitem3.delay(4000).fadeIn();

}

HTML：

<ul>
    <li class="newslist item-1">
        News item 1
    </li>
    <li class="newslist item-2">
        News item 2
    </li>
    <li class="newslist item-3">
        News item 3
    </li>
</ul>

<ul>
    <li class="featured-news item-1">
        <img src="http://placehold.it/350x150">
         <br>News Story 1
    </li>
    <li class="featured-news item-2" style="display: none">
        <img src="http://placehold.it/350x150">
        <br>News Story 2
    </li>
    <li class="featured-news item-3" style="display: none">
        <img src="http://placehold.it/350x150">
        <br>News Story 3
    </li>
</ul>

这是一个小提琴：

http://jsfiddle.net/HdDG6/

Answer 1

以下是我修改代码的方法：

首先，设置全局变量：

var $newsitem = $('.featured-news');

// global variable of the current slide
var current = 0;  

// global variable interval, which will call "nextSlide" func every 3s
var interval = setInterval(nextSlide, 3000);

我更新了幻灯片列表单击功能，因此它变得通用。您现在不需要设置每个幻灯片点击事件：

// attach event to every list item
$('.newslist').click(function () { 

    // clear the interval
    clearInterval(interval); 

    // set it back to reset the timer
    interval = setInterval(nextSlide,3000); 

    // set current slide var to .newslist item index (0, 1, 2,...)
    current = $(this).index(); 

    // hide every shown item
    $newsitem.hide(); 

    // show item which index = current slide index
    $newsitem.eq(current).fadeIn(); 

});

然后我创建了nextSlide函数，它会在隐藏每张幻灯片之前增加当前值，并将当前的幻灯片显示为$('.newslist').click函数

function nextSlide () {

    // if current slide is the last one, go back to the first, else increment
    if (current == $newsitem.length - 1) {
        current = 0;
    } else {
        current++;
    }

    // hide every slides and show the good one
    $newsitem.hide(); 
    $newsitem.eq(current).fadeIn();
}

然后我终于设置了悬停事件，只需在鼠标进入.featured-news时清除计时器并在鼠标离开时将其设置为：

$('.featured-news').hover(function(ev){
    clearInterval(interval);
}, function(ev){
    interval = setInterval(nextSlide,3000);
});

这是一个工作小提琴： DEMO

这样，您可以根据需要添加任意数量的幻灯片，而无需更改代码。您还可以将nextSlide函数绑定到任何按钮或控件（如箭头键或“下一张幻灯片”按钮）。

希望我帮助过你：）

自定义滑块，具有自动定时动画和控件

1 个答案: