滑块jQuery无法正常工作

时间:2014-04-14 05:42:12

标签: javascript jquery

我正在尝试使用jQuery实现基本的滑动功能,请找到下面的代码:

HTML:

<div class="dashboard-crousel" id="spanCarousel">
     <span>My Order</span>
     <span class="selected">Recommendations</span>
     <span>My Profile</span>
     <div id="controls">
        <a href="javascript:void(0);" class="dashboard-crouselLeftArrow"></a>
        <a href="javascript:void(0);" class="dashboard-crouselRightArrow"></a>
     </div>
 </div>

使用Javascript:

<script>
var slider = {
    length: parseInt($("#spanCarousel").children("span").length),
    current: 1,
    width: $("#spanCarousel").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){ 
        var target = (0 - this.width) * (this.current - 1);
        this.run("#spanCarousel", target);

    },
    prev: function(){

        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
        $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
    }
}

slider.initialize();  
</script>

enter image description here

我只想在箭头之间滑动内容,如图所示。

我想将文字从左到右无限移动。请帮忙

1 个答案:

答案 0 :(得分:1)

我在你的代码中看到两个错误。但是因为我没有你的css,所以我无法让你成为一个有效的例子并尝试。

函数parseInt正在使用two parameters,字符串和基数。但是你永远不会放第二个参数。

其次,在程序的最后部分缺少一个半冒号。

  initialize: function(){
    $("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
    $("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
}};

您可以使用JSFiddle来破坏未来的代码,这是一个非常有效的工具。

相关问题