一、写在前面
- 无缝滚动和轮播都是循环的执行翻页或者位移操作
- 一般无缝运行的时间间隔较小(50ms),轮播2-3s
二、无缝滚动
核心:
视窗的scrollTop或margin-top小于它的高度的时候,一直往上移,else置零(下移原理相同);或者scrollLeft
或margin-left小于它的宽度的时候,一直往左移,else置零(右移原理相同)调用:
一般用t=setInterval(scrollFun,speed);停止与再运行
eleWrap.hover(
function() {
clearInterval(t);
}, function() {
t = setInterval(scrollFun,speed);
}
);其他:
为了不让移动在移动到最后一个子内容的时候出现跳闪或者空白,一般在调用移动前,移动区域内再添加一次其内容。demo:
<meta charset="utf-8"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
// 滚动
function autoScroll(){
var speed = 50;
var eleWrap = $("#evtAwardListWrap"),
ele1 = $("#evtAwardList1");
if(ele1.html() !== "") {
var html2 = "<ul>" + ele1.html() + "</ul>";
eleWrap.find("ul").eq(0).siblings().remove();
eleWrap.append(html2);
}
var sTop = 0;
var scrollFun = function() {
if(eleWrap.scrollTop() < $("#evtAwardList1").height()) {
sTop ++;
eleWrap.scrollTop(sTop);
} else {
eleWrap.scrollTop(0);
sTop = 0;
}
}
var t=setInterval(scrollFun,speed);
eleWrap.hover(
function() {
clearInterval(t);
}, function() {
t = setInterval(scrollFun,speed);
}
);
}
$(function(){
autoScroll();
});
</script>
<div id="evtAwardListWrap" class="evt_award_list_wrap">
<ul id="evtAwardList1">
<li>恭喜用户334**抽中5元现金劵</li>
<li>恭喜用户561**抽中50元现金劵</li>
<li>恭喜用户228**抽中5元现金劵</li>
<li>恭喜用户993**抽中5元现金劵</li>
<li>恭喜用户468**抽中5元现金劵</li>
<li>恭喜用户878**抽中100元现金劵</li>
<li>恭喜用户933**抽中5元现金劵</li>
<li>恭喜用户153**抽中50元现金劵</li>
<li>恭喜用户335**抽中5元现金劵</li>
<li>恭喜用户369**抽中5元现金劵</li>
<li>恭喜用户777**抽中5元现金劵</li>
<li>恭喜用户712**抽中满2000-150优惠劵</li>
<li>恭喜用户648**抽中5元现金劵</li>
<li>恭喜用户419**抽中50元现金劵</li>
<li>恭喜用户552**抽中50元现金劵</li>
<li>恭喜用户973**抽中5元现金劵</li>
</ul>
</div>
<style type="text/css">
.evt_award_list_wrap{position: relative;width:346px;height:160px;overflow: hidden;font-size: 14px;color:#000; line-height: 26px;}
</style>
三、轮播
可以改造无缝滚动的代码,当然也可以用下面的方法简单实现。
function move(){
$(".xiao").animate({marginLeft:"-185px"},"slow",function(){
$('.xiao li').first().appendTo($(".xiao"));
$(".xiao").css('marginLeft',0);
})
}
原理:
每次讲第一个子元素移到最后,父级向左移动一个子元素的宽度。(上下移动同理)
demo:
<meta charset="utf-8"/>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(function(){
$('.xiao').width($('.xiao li').length*185);
var index=0;
var t=setInterval(move,2000);
function move(){
$(".xiao").animate({marginLeft:"-185px"},"slow",function(){
$('.xiao li').first().appendTo($(".xiao"));
$(".xiao").css('marginLeft',0);
})
}
$(".xiao").hover(function(){
clearInterval(t);
},function(){
t=setInterval(move,2000);
})
})
</script>
<style>
.part_scroll{width:1140px;/*width:370px;*/height:50px;margin:0 auto;position:relative;left:0px;z-index:2;visibility:visible;overflow:hidden;}
.part_scroll0 ul li{width:150px;height:53px;float:left;margin-left:35px;}
.xiao,.part_scroll0{z-index:1;/*width:3213px;*/height:53px;position:relative;cursor:pointer;}
.xiao img{width: 150px;height: 50px;}
li{list-style: none;}
</style>
<div class="part_scroll">
<div class="part_scroll0">
<ul class="xiao">
<li><img src="images/xiao_1.jpg"></li>
<li><img src="images/xiao_2.jpg"></li>
<li><img src="images/xiao_3.jpg"></li>
<li><img src="images/xiao_4.jpg"></li>
<li><img src="images/xiao_5.jpg"></li>
<li><img src="images/xiao_6.jpg"></li>
<li><img src="images/xiao_7.jpg"></li>
</ul>
</div>
</div>
ps:鉴于个人经验有限,所有观点,如有异议,请直接回复讨论(请勿发表攻击言论)。
加入QQ群209952809(需回答问题,答案为csdn);群聊更快解决问题,更happy。