當前位置:首頁 » 健康資訊 » 可以實現圖片無間斷滾動嗎
擴展閱讀
不露軍徽的照片可以發嗎 2025-08-16 01:56:28
有什麼思路可以做游戲 2025-08-16 01:54:45

可以實現圖片無間斷滾動嗎

發布時間: 2025-08-16 01:21:32

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();
}
}
}
}