2012-01-13 22 views
2

私のJCaroselスライダに問題があります。必要に応じて、私のHTMLは...jQuery scrollTo関数の問題

<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の1.6.2とJcarcouselを使用してい

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; 

}

を次のように私のjQueryの関数である

ご覧のとおり、テキストと強調表示されたボタンの変更には問題ありません。インデックスの小数点が正しいままで6番目(5)が選択されると、最初の(0)の画像に戻ります。 caroselは5枚以上の画像を表示しないようです。 scroll32関数には、&強調表示されたボタンのテキストを変更する関数には存在しないため、これを配置しました。

あなたは、ここでアクションのコードを参照して、お肌に異常があるように見えますバグを見るために第六ボタンに予め

答えて

1

http://pw.ipagtest.com/

感謝をクリックすることができます。 Slider.css。

私はあなたがULを十分に大きくしていないと思って、最後のスライドが最初のスライドの下に落ちています。

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

幅を4320px(720px * 6)に変更するか、それが機能しない場合は多少大きめに変更してください。