2012-01-13 6 views
2

제 JCarosel 슬라이더에 문제가 있습니다. 내 HTML은 필요에 따라 ... 설정 나는 JQuery와 1.6.2과 JcarcouseljQuery scrollTo 함수 문제

을 사용하고

function homepageSlider() { 
//init 

$("#homeSliderLeftText ul li:gt(0)").hide(); 
// Ensure the first image is displayed 
$("#homeSliderRightMask").scrollTo($("#homeSliderRightMask ul li:first"), 300, { axis: "x" }); 
// Set the MORE button link to the first project 
firstLink = $("#homeSliderLeftText ul li:first").attr("rel") 
$("#homeSliderLeftButton a").attr("href", firstLink) 
// Set up the slider navigation 
$("#homeSliderLeftNav li a").bind("click", function(e) { 
    e.preventDefault(); 

    moveSlider($(this).text() - 1); 
}); 

// Slide the slider to the selected index 
function moveSlider(index) { 

    //reset all the items 
    $("#homeSliderLeftNav ul li a").removeClass("on"); 
    //set current item as active 
    $("#homeSliderLeftNav ul li a:eq(" + index + ")").addClass("on"); 
    $("#homeSliderRightMask").scrollTo(
     $("#homeSliderRightMask ul li:eq(" + index + ")"), 300, 
     { 
      axis: "x", 
      onAfterFirst: changeText(index) 
     } 
    ); 
} // moveSlider() 

// Change the text of the current project, update the MORE button link 
function changeText(index) { 

    link = $("#homeSliderLeftText ul li:eq(" + index + ")").attr("rel"); 
    $("#homeSliderLeftButton a").attr("href", link); 
    $("#homeSliderLeftText li, #homeSliderLeftText li a").hide(0, function() { 
     $("#homeSliderLeftText li:eq(" + index + "), #homeSliderLeftText li a:eq(" + index + ")").fadeIn().show(); 
    }); 
} // changeText() 
return false; 

}

을 다음과 같이

<div id="homeSlider"> 
<div id="homeSliderLeft"> 
    <div id="homeSliderLeftNav"> 
     <ul> 
      <li><a href="#" class="on">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
      <li><a href="#">6</a></li> 

     </ul> 
    </div> 
    <div id="homeSliderLeftText"> 
     <ul> 
      <li rel="#1"><strong>Donga Bridge</strong>Taraba State, Nigeria</li> 
      <li rel="#2"><strong>Golf Course</strong>Druids Glen Golf Club, Co. Wicklow, Ireland</li> 
      <li rel="#3"><strong>Oil and Gas</strong>Consectetur adipisicing elit in reprehenderit in voluptate velit</li> 
      <li rel="#4"><strong>Airport</strong>Enugu Airport, Enugu State, Nigeria</li> 
      <li rel="#5"><strong>Road in Countryside</strong>Panyam to Shendam Road, Jos, Plateau State, Nigeria.</li> 
      <li rel="#6"><strong>Open Cast Mining</strong>Consectetur adipisicing elit in reprehenderit in voluptate velit</li> 

     </ul> 
     <!--homeSliderLeftText--> 
    </div> 
    <div id="homeSliderLeftButton"> 
     <a href="#" class="button butMoreYellow">More</a> 
    </div> 
    <!--homeSliderLeft--> 
</div> 
<div id="homeSliderRight"> 
    <div id="homeSliderRightMask"> 
     <ul> 
      <li><img src="images/template/homeSlider_001.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_002.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_003a.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_004.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_005.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_006.jpg" width="720" height="240" alt="" /></li> 

     </ul> 
     <!--homeSliderRightMask--> 
    </div> 
    <!--homeSliderRight--> 
</div> 
<!--homeSlider--> 

내 JQuery와 기능이 있습니다

본인은 텍스트와 강조 표시된 버튼을 변경하는 데 아무런 문제가 없음을 알 수 있습니다. 색인 가변이 올바른 상태에서 6 번째 (5)를 선택하면 슬라이더가 첫 번째 (0) 이미지로 돌아갑니다. carosel이 5 개 이상의 이미지를 표시하지 않는 것 같습니다. scroll32 함수는 텍스트를 변경하는 함수에 없기 때문에 scrollTo 함수에 넣습니다. & 강조 표시된 단추.

당신은 여기 행동의 코드를 참조 미리

피부에 문제가있는 것 같습니다

답변

1

에 버그를

http://pw.ipagtest.com/

감사를보기 위해 6 버튼을 클릭 할 수 있습니다. Slider.css.

나는 너가 너의 넓게 너가 마지막 슬라이드가 첫번째 것의 밑에 아래로 떨어지고있다 충분히 넓게 만들고있다 것을 나는 생각한다.

#homeSlider #homeSliderRightMask ul { 
    float: left; 
    height: 240px; 
    width: 4000px; 
} 

너비를 4320px (720px * 6)로 변경하거나 작동하지 않는 경우 조금 더 크게 변경하십시오.