普通
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0px;margin:0px}
.item-box{
position: relative;
overflow: hidden;
height:30px;
}
.item{
position: absolute;
height: 30px;
left:0px;
line-height: 30px;
}
</style>
</head>
<body>
<ul class="item-box">
<li class="item">aaaa</li>
<li class="item">bbbb</li>
<li class="item">cccc</li>
<li class="item">dddd</li>
<li class="item">eeee</li>
<li class="item">ffff</li>
</ul>
</body>
</html>
<script type="text/javascript" src="../../jq/js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$('.item').each(function(k,v){
$(v).css({
top: k * 30 + 'px'
})
});
setInterval(inter,2000);
function inter(){
$disappear = $('.item:first');
$clone = $('.item:first').clone();
$clone.css({top: $('.item').length * 30});
$('.item-box').append($clone);
$('.item').animate({top: '-=30px'},1000,function(){
$disappear.remove();
})
}
</script>
jQuery插件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{padding:0px;margin:0px}
</style>
</head>
<body>
<ul class="item-box">
<li class="item">aaaa</li>
<li class="item">bbbb</li>
<li class="item">cccc</li>
<li class="item">dddd</li>
<li class="item">eeee</li>
<li class="item">ffff</li>
</ul>
</body>
</html>
<script type="text/javascript" src="plugin/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="plugin/slider.js"></script>
<script type="text/javascript">
$('.item-box').slider({
height: 30,
showRow: 2,
sliderTime: 500,
speed: 2000
});
</script>
js
;(function($,window,document,undefined){
$.fn.slider = function(options){
var defaults = {
height: 30,
showRow: 2,
sliderTime: 1000,
speed: 3000
}
var _this = this;
var opt = $.extend({}, defaults,options);
_this.css({
height:opt.height* opt.showRow,
position: 'relative',
overflow: 'hidden'
}); // .item-box样式
_this.children('li').css({
height: opt.height , //li的高度
lineHeight: opt.height +'px',
position: 'absolute',
left:'0px'
});
_this.children('li').each(function(k,v){ //通过绝对定位
$(this).css({
top: k*opt.height + 'px'
});
});
// setTimeout(inter,opt.speed);
setInterval(inter,opt.speed);
function inter(){
var $disappear = _this.children('li').eq(0);
var $clone = _this.children('li').eq(0).clone();
$clone.css({
top: _this.children('li').length * opt.height
});
_this.append($clone);
_this.children('li').animate({top: '-=' + opt.height + 'px'},opt.sliderTime,function(){
$disappear.remove();
});
}
};
})(jQuery,window,document);