html网页设计中,如何设置无间断循滚动环图片

 我来答
H盐酸
2011-09-30 · 超过13用户采纳过TA的回答
知道答主
回答量:39
采纳率:0%
帮助的人:33.1万
展开全部
这是我曾经写的一个简易二次方缓动轮播器/**
* Player 轮播器
* @param object obj
* @author 124798764@qq.com
* obj{
* frame //内容框架,position:absolute;
* lists //轮播内容节点数组,注意这个父容器的lists复写一次,如果是ul,则ul.innerHTML+=ul.innerHTML,呈现不间断滚动
* time //跳帧时间3000ms
*
* }
*/
function Player(obj){
this.frame=obj.frame, //内容框架
this.lists=obj.lists, //移动节点
this.time=obj.time||3000, //帧翻滚间隔
this.index=0, //初始化第一帧位置
this.step=this.lists[0].offsetHeight||0 ; //翻滚步长
this.run();
}
Player.prototype={
//跳帧
skip:function(time){
this.skipInterval&&clearInterval(this.skipInterval);
var _this=this;
var des=this.lists[this.index].relatedPosition;
var t=0;
this.skipInterval=setInterval(function(){
t+=10;
_this.frame.style.top=_this.lists[_this.index-1].relatedPosition-Math.ceil(_this.step*Math.pow(t/time,2))+"px";
if(t==time){
clearInterval(_this.skipInterval);
}
},10);

},
//下一帧
next:function(){
this.index+=1;
if(this.index>this.lists.length/2) {
this.frame.style.top="0px";
this.index=1;
}
this.skip(300);
},
//开始跳帧
start:function(){
var _this=this;
this.interval=setInterval(function(){
_this.next();
},this.time);
},
//停止跳帧
stop:function(){
clearInterval(this.interval);
},
//初始化轮播器
run:function(){
this.start();
this.deal();
},
//帧处理
deal:function(){
var _this=this;
for(var i=0;i<this.lists.length;i++){
this.lists[i].relatedPosition=-this.lists[i].offsetTop;
this.lists[i].onmouseover=function(){
_this.stop();
}
this.lists[i].onmouseout=function(){
_this.start();
}
}
}
}
百度网友a91dbe362
2011-09-30 · TA获得超过1.1万个赞
知道大有可为答主
回答量:4087
采纳率:0%
帮助的人:4306万
展开全部
看这个文章:
http://apps.hi.baidu.com/share/detail/22857282

里面的内容要够多才会滚动,很多人用这个代码都滚动不起来,主要是往里面放的内容不够,一两张图片少了不会滚动,多加点。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百度网友044cb6f
2011-09-30
知道答主
回答量:51
采纳率:0%
帮助的人:24.9万
展开全部
你要的效果是这样的不。www.sdyfwd.com 。这是从右向左循环滚动的。
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式