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

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

我已经设法使滑块工作，以便您可以单击其中一个列表项，然后更改幻灯片

但是，我也希望滑块在默认情况下通过所有幻灯片设置动画。我希望单击列表项以覆盖动画并使动画循环转到循环中当前幻灯片所在的点。因此，如果用户单击幻灯片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:

新闻项目1


新闻项目2


新闻项目3





新闻故事1



新闻故事2



新闻故事3

这是一把小提琴：

---

以下是我如何修改您的代码：

首先，设置全局变量：

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”）之前增加当前幻灯片的数量。单击
函数

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').hover(function(ev){
    clearInterval(interval);
}, function(ev){
    interval = setInterval(nextSlide,3000);
});

这是一把小提琴：

通过这种方式，您可以添加任意数量的幻灯片，而无需更改代码。您还可以将
nextSlide
功能绑定到任何按钮或控件（如箭头键或“下一张幻灯片”按钮）

希望我能帮助您：）
以下是我如何修改您的代码：

首先，设置全局变量：

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”）之前增加当前幻灯片的数量。单击
函数

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').hover(function(ev){
    clearInterval(interval);
}, function(ev){
    interval = setInterval(nextSlide,3000);
});

这是一把小提琴：

通过这种方式，您可以添加任意数量的幻灯片，而无需更改代码。您还可以将
nextSlide
功能绑定到任何按钮或控件（如箭头键或“下一张幻灯片”按钮）

希望我能帮助你：）
这太棒了，这正是我需要的，而且解释得很好。非常感谢你的帮助！一切都好。这太棒了，这正是我所需要的，而且解释得很好。非常感谢你的帮助！祝你一切顺利。