자바 스크립트 이동 상자의 자동 재생

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; 
    } 
}); 



} 


); 

정말 답을 수신 기대하고있다.

감사합니다.

감사합니다. 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);