Javascript autoslider无法正常工作

时间:2018-03-19 20:54:36

标签: javascript

功能

function autoHeadline(time) {
    var elem = $('div#main-headline ul.main-headline-item li.x');
    var id = elem.index();
    if(id==-1) { 
        id = 0; 
        elem = $('ul.main-headline-item li.x').eq(id); 
    }

    $('div#main-headline ul.main-headline-item li').removeClass('active').removeClass('x');
    $('div#main-headline ul.main-headline-item li').eq(id).addClass('active');
    $('div#main-headline ul.main-headline-item li').eq(id+1).addClass('x');
    $('div#main-headline ul.main-headline-number li').removeClass('active');
    $('div#main-headline ul.main-headline-number li').eq(id).addClass('active');

    headlineTime = setTimeout('autoHeadline('+time+')', time);
}

这是滑块的JS:

    $('.image-news span.btn').click(function slider() {
        var container = $(this).parent();
        var type = $(this).data('type');
        var index = container.find('ul li.active').index();
        var count = container.find('ul li').size()-1 ;
        var timer = setInterval(slider,1000);

        if(type == 'prev') { 
            index -= 1; 
        } else { 
            index += 1; 
        }

        if(index < 0) { 
            index = count; 
        } else if(index > count) { 
            index = 0; 
        }

        container.find('ul li.active').removeClass('active')
        container.find('ul li').eq(index).addClass('active');       
    }, function() { autoHeadline(headlineDelay); });

自动滑块不起作用。只有当我单击箭头一次时,自动滑块才有效。

我该如何解决?

我希望我的滑块自行更换。

2 个答案:

答案 0 :(得分:0)

目前,您只需在点击按钮时进行初始autoHeadline通话。您需要在页面加载时首先调用它才能启动链接。

由于您正在使用jQuery,因此您应该进行$(document).ready(...)调用。在该处理函数中,调用autoHeadline(headlineDelay)

答案 1 :(得分:-2)

const time = 1000; 的setInterval(函数(){

Paste your code here, which will run every 1000 milliseconds 

},时间);