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）图像，而索引变量保持正确。似乎carosel不会显示超过5张图像。我把它放到了scrollTo函数中，因为它不存在于改变文本和功能的函数中。突出显示的按钮。

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

http://pw.ipagtest.com/

提前致谢

Answer 1

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

我认为你的UL不够宽，最后一张幻灯片落在第一张幻灯片之下。

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

如果不起作用，请将宽度更改为4320px（720px * 6）或更大一些。

jQuery scrollTo函数问题

1 个答案: