Jquery Slider 기능

Question

다음으로 이동하십시오 : http://gati.simptome-remedii.ro/. 보시다시피 헤더에 회전식 효과가 있으며 화살표를 클릭하거나 왼쪽/오른쪽 키를 누르면 앞뒤로 이동합니다. 하지만 2, 3과 함께 첫번째 패널을 표시하고 싶지만 부하에 3, 4와 함께 제 2 패널을 표시

이 회전 목마 효과는 JQuery와-1.3.1.min.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; 
    } 
}); 



} 


); 

`

Answer 1

그냥 빈 panel_0를 추가는 먼저 하나

로 panel_1로드