我正在尝试使用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>
我只想在箭头之间滑动内容,如图所示。
我想将文字从左到右无限移动。请帮忙
答案 0 :(得分:1)
我在你的代码中看到两个错误。但是因为我没有你的css,所以我无法让你成为一个有效的例子并尝试。
函数parseInt
正在使用two parameters,字符串和基数。但是你永远不会放第二个参数。
其次,在程序的最后部分缺少一个半冒号。
initialize: function(){
$("#controls .dashboard-crouselLeftArrow").click(function(){slider.next();});
$("#controls .dashboard-crouselRightArrow").click(function(){slider.prev();});
}};
您可以使用JSFiddle来破坏未来的代码,这是一个非常有效的工具。