Автоигра для javascript движущихся ящиков - PullRequest
Новая
       28

Автоигра для javascript движущихся ящиков

1 голос
/ 13 февраля 2010

Пожалуйста, перейдите по адресу: 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;
   }
 });



}


);

Я очень жду ответа.

Спасибо!

С уважением, Разван.

1 Ответ

1 голос
/ 13 февраля 2010

Самое простое, что нужно сделать 

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