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

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 函数绑定到任何按钮或控件（如箭头键或“下一张幻灯片”按钮）。

希望我能帮到你:)