实现基于jQuery的图片/文字无缝转动

你知道jQuery，你也知道图片转动的结果，可是你知道啥叫无缝转动不？无缝转动，就是无缝的转动！换句话说，无缝转动就是，图片可能文字下一张下一张地转动，当转动到屁股的时候就看到头了，反过来，当转动到头的时候又能看到屁股了。照旧看 DEMO 吧，或者更好领略一些。如你所见，看成为一排图片展示的时候，无缝转动可以让人有无尽的感受，页面一下子就充分了。

因为我也不是决心去写这个 jQuery 的无缝转动，所以 JS 也没封装过，只提供了几个根基的参数作修改，只能仅作参考。

HTML 部门：

<div class="scroll_area">
<div class="scroll_list">
<ul class="scroll_ul">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ul>
</div>
<a id="prev" class="btn_icon" href="javascript:;">上一个</a>
<a id="next" class="btn_icon" href="javascript:;">下一个</a>
</div>

jQuery部门：

$(function() {
//设置变量
var config = {
showNum : 3, //配置转动的显示个数
autoScroll : false, //是否自动转动，默认为 false
autoScrollInterval : 3000 //自动转动隔断，默认为 3000 毫秒，autoScroll = true 时才有效
}

var scrollUlWidth = $('.scroll_ul li').outerWidth(true), //单个 li 的宽度
scrollUlLeft = 0, //.scroll_ul 初使化时的 left 值为 0
prevAllow = true, //为了防备持续点击上一页按钮
nextAllow = true; //为了防备持续点击下一页按钮

//计较父容量限宽
$('.scroll_list').width(config.showNum * scrollUlWidth);

//点击上一页
$('#prev').click(function() {
if (prevAllow) {
prevAllow = false;
scrollUlLeft = scrollUlLeft - scrollUlWidth;
$('.scroll_ul').css('left', scrollUlLeft);
//复制最后一个 li 并插入到 ul 的最前面
$('.scroll_ul li:last').clone().prependTo('.scroll_ul');
//删除最后一个 li
$('.scroll_ul li:last').remove();
$('.scroll_ul').animate({
left : scrollUlLeft + scrollUlWidth
}, 300, function() {
scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
prevAllow = true;
})
}
});

//点击下一页
$('#next').click(function() {
if (nextAllow) {
nextAllow = false;
$('.scroll_ul').animate({
left : scrollUlLeft - scrollUlWidth
}, 300, function() {
scrollUlLeft = parseInt($('.scroll_ul').css('left'), 10);
scrollUlLeft = scrollUlLeft + scrollUlWidth;
$('.scroll_ul').css('left', scrollUlLeft);
//复制第一个 li 并插入到 ul 的最后头
$('.scroll_ul li:first').clone().appendTo('.scroll_ul');
//删除第一个 li
$('.scroll_ul li:first').remove();
nextAllow = true;
})
}
});

//自动转动
if (config.autoScroll) {
setInterval(function() {
$('#next').trigger('click');
}, config.autoScrollInterval)
}
})

根基道理和利用要领都写在注释里了，我也就不多作表明白。最后说一句，google、百度上搜一下就知道，已经有大把大把写好的横的竖的无缝的转动，总有一款适合你，可是我以为，只有本身亲自写的才最适合本身的需要，所以就有了以上代码。