A. js中怎么实现图片不间断的向左滚动效果,要那种代码清晰的~
<script type="text/javascript">
var speed = 20;//滚动速度
var maq;
var m1;//第一份滚动的内容
var m2;//第二份滚动的内容
var timer;//定时器
function run(){
if(m1.offsetWidth<=maq.scrollLeft){
maq.scrollLeft-=m1.offsetWidth;
}else{
maq.scrollLeft+=6;
}
}
window.onload=function(){
maq=document.getElementById("maq");
m1=document.getElementById("m1");
m2=document.getElementById("m2");
m2.innerHTML=m1.innerHTML;
if(timer==null){
timer=window.setInterval(run,speed);
}
maq.onmouseover=function(){
window.clearInterval(timer);
}
maq.onmouseout=function(){
timer=window.setInterval(run,speed);
}
}
</script>
</head>
<body>
<div id="maq" style="height:200px; width:180px; overflow:hidden">
<table>
<tr>
<td id="m1">
<table>
<tr>
<td><img src="file:///E|/Images/player1.png" width="174" height="268" /></td>
<td><img src="file:///E|/Images/player2.png" width="174" height="268" /></td>
<td><img src="file:///E|/Images/player3.png" width="174" height="268" /></td>
</tr>
</table>
</td>
<td id="m2"></td>
</tr>
</table>
</div>
</body>
楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了,~要采纳呦~你懂得~~
B. html网页设计中,如何设置无间断循滚动环图片
这是我曾经写的一个简易二次方缓动轮播器/**
* Player 轮播器
* @param object obj
* @author [email protected]
* 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();
}
}
}
}