我正在创建一个从头开始的下一个/上一个导航,并希望点击“下一个”按钮增加(动画)每次点击X留下的边距,直到达到结束(在这种情况下为-320px),类似后退按钮的方法。我可能是超级密集的 - 但我的javascript如下:
function myFunction() {
"use strict";
if (jQuery) {
var $next = $(".next"),
$back = $(".back"),
$box = $(".box"),
regWidth = $box.width(),
$contain = $(".contain"),
len = 0,
combinedWidth = 0,
len = $box.length;
while (len--) {
combinedWidth = combinedWidth + $($box[len]).width();
}
$contain.width(combinedWidth);
$next.bind('click', function (e) {
e.preventDefault();
var $this = $(this),
$tWidth = $this.width();
$contain.animate({
marginLeft: "+=" + (-regWidth) + "px"
});
});
//click event for back
$back.click(function (e) {
e.preventDefault();
var $this = $(this),
$tWidth = $this.width();
$contain.animate({
marginLeft: "+=" + (regWidth) + "px"
});
});
}
};
$(function () {
myFunction();
});
CSS如下:
#wrap {
width:320px;
margin:0 auto;
overflow:hidden;
}
.contain {
float:left;
background:#e9e9e9;
height:480px;
}
.box
{
min-height:75px;
}
非常感谢任何帮助!!