javascript移动框自动播放

Question

请转到：http://gati.simptome-remedii.ro/。正如你所看到的，标题中有一个传送带效果，一旦你点击箭头或按左/右键，它就会前后移动。 我需要它来自动播放，所以我需要一个自动翻转效果。 时间间隔应该是5秒（我想我可以在以后设置）。

此传送带效果使用jquery-1.3.1.min.js和slider.js。

Slider.js

$(function() { 

var totalPanels = $(".scrollContainer").children().size(); 

var regWidth = $(".panel").css("width"); 
var regImgWidth = $(".panel img").css("width"); 
var regTitleSize = $(".panel h2").css("font-size"); 
var regParSize = $(".panel p").css("font-size"); 

var movingDistance  = 300; 

var curWidth = 350; 
var curImgWidth = 220; 
var curTitleSize = "15px"; 
var curParSize = "15px"; 

var $panels = $('#slider .scrollContainer > div'); 
var $container = $('#slider .scrollContainer'); 

$panels.css({'float' : 'left','position' : 'relative'}); 

$("#slider").data("currentlyMoving", false); 

$container 
    .css('width', ($panels[0].offsetWidth * $panels.length) + 100) 
    .css('left', "-350px"); 

var scroll = $('#slider .scroll').css('overflow', 'hidden'); 

function returnToNormal(element) { 
    $(element) 
    .animate({ width: regWidth }) 
    .find("img") 
    .animate({ width: regImgWidth }) 
     .end() 
    .find("h2") 
    .animate({ fontSize: regTitleSize }) 
    .end() 
    .find("p") 
    .animate({ fontSize: regParSize }); 
}; 

function growBigger(element) { 
    $(element) 
    .animate({ width: curWidth }) 
    .find("img") 
    .animate({ width: curImgWidth }) 
     .end() 
    .find("h2") 
    .animate({ fontSize: curTitleSize }) 
    .end() 
    .find("p") 
    .animate({ fontSize: curParSize }); 
} 

//direction true = right, false = left 
function change(direction) { 

    //if not at the first or last panel 
    if((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false; } 

     //if not currently moving 
     if (($("#slider").data("currentlyMoving") == false)) { 

    $("#slider").data("currentlyMoving", true); 








    var next   = direction ? curPanel + 1 : curPanel - 1; 
    var leftValue = $(".scrollContainer").css("left"); 
    var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance; 

    $(".scrollContainer") 
    .stop() 
    .animate({ 
    "left": movement 
    }, function() { 
    $("#slider").data("currentlyMoving", false); 
    }); 

    returnToNormal("#panel_"+curPanel); 
    growBigger("#panel_"+next); 

    curPanel = next; 

    //remove all previous bound functions 
    $("#panel_"+(curPanel+1)).unbind(); 

    //go forward 
    $("#panel_"+(curPanel+1)).click(function(){ change(true); }); 

      //remove all previous bound functions    
    $("#panel_"+(curPanel-1)).unbind(); 

    //go back 
    $("#panel_"+(curPanel-1)).click(function(){ change(false); }); 

    //remove all previous bound functions 
    $("#panel_"+curPanel).unbind(); 
    } 
} 




// Set up "Current" panel and next and prev 
growBigger("#panel_3"); 
var curPanel = 3; 

$("#panel_"+(curPanel+1)).click(function(){ change(true); }); 
$("#panel_"+(curPanel-1)).click(function(){ change(false); }); 

//when the left/right arrows are clicked 
$(".right").click(function(){ change(true); }); 
$(".left").click(function(){ change(false); }); 

$(window).keydown(function(event){ 
    switch (event.keyCode) { 
    case 13: //enter 
    $(".right").click(); 
    break; 
    case 32: //space 
    $(".right").click(); 
    break; 
    case 37: //left arrow 
    $(".left").click(); 
    break; 
    case 39: //right arrow 
    $(".right").click(); 
    break; 
    } 
}); 



} 


); 

我真的很期待收到答案。

谢谢！

Regards， Razvan。

Answer 1

简单的事情是做

setInterval(function() {$('.right').click();}, 5000); 

这将调用右键选择每5秒..

但你需要添加一些逻辑，如果你想让它去的都留和权利..

更新

试试这个（放在$(window).keydown行之前..）

setInterval(function(){ 
    if (curPanel == totalPanels) 
     { 
      curPanel = 1; 
      $("#slider").data("currentlyMoving", true); 
      $(".scrollContainer") 
       .stop() 
       .animate({ 
         "left": movingDistance 
         }, function() { 
             $("#slider").data("currentlyMoving", false); 
            }); 
      returnToNormal("#panel_"+totalPanels); 
      growBigger("#panel_1"); 

     } 
    else 
     { 
      $('.right').click(); 
     } 
} ,5000);