javascript - jQuery scrollTo 函数的问题

Question

我的 JCarosel slider 有问题。我的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) 个图像时， slider 返回到第一个(0) 图像，同时索引变量保持正确。似乎轮播不会显示超过 5 张图像。我已将其归结为 scrollTo 函数，因为它不存在于更改文本和突出显示按钮的函数中。

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

http://pw.ipagtest.com/

提前致谢

Answer 1

看来你的皮肤有问题。 slider .css。

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

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

将宽度更改为 4320px (720px * 6) 或者如果不起作用的话可能再大一点。