jQuery scrollTo 函数的问题

Question

我的 JCarosel 滑块有问题。我的html已按要求设置...

<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 函数如下

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 1.6.2 和 Jcarcousel

如您所见，我在更改文本和突出显示的按钮方面没有任何问题。当选择第 6 个 (5) 图像且索引变量保持正确时，滑块将返回到第一个 (0) 图像。轮播似乎不会显示超过 5 张图像。我已将其归结为scrollTo 函数，因为它不存在于更改文本和滚动的函数中。突出显示的按钮。

您可以在此处查看正在运行的代码，单击第 6 个按钮查看错误

http://pw.ipagtest.com/提前

致谢

Answer 1

看起来你的皮肤有问题。滑块.css。

我认为您使 UL 不够宽，最后一张幻灯片低于第一张幻灯片。

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

将宽度更改为 4320 像素 (720 像素 * 6)，或者如果不起作用，则可以更大一点。