阿Q正传

[jQuery]图片轮播特效

随便一搜这个图片轮播,那源代码不是一份两份,那是几堆几堆哟~不过大部分都写得太复杂或者功能太弱,那咱就用jQuery自给自足呗。

要实现的效果也很明确:自动获取对象列表中第一个元素的宽度,然后列表整体向左平移,再把第一个元素绑定到列表最后去;可以再加个鼠标移到列表上停止平移,移开则恢复。

在线demo:http://immmmm.com/demo/scrollbox/

HTML结构代码:











CSS代码:

#scrollbox{width:500px;height:240px;position:relative;overflow:hidden;margin:0 auto;border:1px solid #000;}
#scrollbox ul {width:900px;height:280px;position:absolute;padding:10px 0;}
#scrollbox li {float:left;position:relative;margin:0 10px;border:1px solid #000;}




jQuery核心代码:

function scrollBox(){
var first = $('#scrollbox ul li:first');
var width = -(first.outerWidth(true)) + 'px';
$('#scrollbox ul').animate({left:width},{
duration:200,
complete:function(){
$('#scrollbox ul').append(first).css("left","0");
}
});
};
$(document).ready(function(){
myScroll = setInterval(scrollBox,1500);
$('#scrollbox').hover(function(){
clearInterval(myScroll);
},function(){
myScroll = setInterval(scrollBox,1500);
}
);
})

当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »

因本文不是用Markdown格式的编辑器书写的,转换的页面可能不符合AMP标准。