js如何做無縫鏈接滾動

『壹』 JavaScript裡面怎麼讓圖片實現無縫橫向滾動效果！！！

先了解一下對象的幾個的屬性： innerHTML:設置或獲取位於對象起始和結束標簽內的 HTML scrollHeight: 獲取對象的滾動高度。 scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離 scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離 scrollWidth:獲取對象的滾動寬度 offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度 offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置 offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置 offsetWidth:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的寬度 圖片上無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向上滾動 <div id="demo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2 function Marquee(){ if(tab2.offsetTop-tab.scrollTop<=0)//當滾動至demo1與demo2交界時 tab.scrollTop-=tab1.offsetHeight //demo跳到最頂端 else{ tab.scrollTop++ } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器 --> </script> 圖片下無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; height: 100px; text-align: center; float: left; } #demo img { border: 3px solid #F2F2F2; display: block; } --> </style> 向下滾動 <div id="demo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; //克隆demo1為demo2 tab.scrollTop=tab.scrollHeight function Marquee(){ if(tab1.offsetTop-tab.scrollTop>=0)//當滾動至demo1與demo2交界時 tab.scrollTop+=tab2.offsetHeight //demo跳到最頂端 else{ tab.scrollTop-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)};//滑鼠移上時清除定時器達到滾動停止的目的 tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//滑鼠移開時重設定時器 --> </script> 圖片左無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向左滾動 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script> 圖片右無縫滾動 <style type="text/css"> <!-- #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 500px; } #demo img { border: 3px solid #F2F2F2; } #indemo { float: left; width: 800%; } #demo1 { float: left; } #demo2 { float: left; } --> </style> 向右滾動 <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> <a href="#"><img src=" http://www.fu80.com/other/link/Clear_logo.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> <!-- var speed=10; //數字越大速度越慢 var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab.scrollLeft<=0) tab.scrollLeft+=tab2.offsetWidth else{ tab.scrollLeft-- } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}; --> </script>

『貳』 通過js實現圖片的無縫滾動時，怎麼才能使它向上沒有間距，我從網上看的一些代碼可以使圖片無縫滾動但是...

這個是通過CSS來控制的。

一般是 修改 padding 或者 margin 的值。

比如使用ul 製作的圖片內列表

HTML 代碼：容
<ul id="ScrollMe">
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
<li><a href="#"><img src="images/1.jpg" width="120" height="90" /></a></li>
</ul>

CSS代碼：
#ScrollMe li { padding:0; margin:0;}

『叄』 求一段滾動的js代碼，向左無縫滾動

/// <summary>
/// 載入一個Sprite
/// </summary>
private Sprite LoadSprite(string assetName)

{
Texture texture = (Texture)Resources.Load(assetName);

Sprite sprite = Sprite.Create((Texture2D)texture, new Rect(0, 0, texture.width, texture.height), new Vector2(0.5f, 0.5f));
return sprite;
}

『肆』 html/js 使用marquee標簽，怎麼可以做到無縫滾動

需要js的配合一下是一個非常好用的一個html代碼,可以試試

<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"

"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>一行多列文字循環滾動帶停頓-</TITLE>

<metaname="keywords"content="網頁特效"/>
<metaname="description"content=""/>
<METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8">
<styletype="text/css">
ul{height:200px;
	padding-right:0px;
	padding-left:0px;
	padding-bottom:0px;
	margin:0px;
	padding-top:0px
}
#announcement{
	width:300px;
	height:200px;
	background:url(img/menu_bg.gif)repeat;
	overflow:hidden;
}
#announcementdiv{
	border:#e6e6e61pxsolid;
	padding:0px10px0px10px;
	overflow-y:hidden;
	line-height:24px;
	height:100px;
}
#announcementli{
	font-size:12px;
	float:left;
	list-style-type:none;
	margin-right:20px;
	padding-left:10px;
	background:url(img/arrow_right.gif)no-repeat0px50%;
	white-space:nowrap
}
#announcementa{
	text-decoration:none;
}
#announcementa:hover{
	text-decoration:underline;
}
</style>
</HEAD>
<BODY>
<DIVid="announcement"onMouseOver="if(!anncount){clearTimeout(annst);annst=0}"onMouseOut="if(!annst)annst=setTimeout('announcementScroll()',anndelay);">
<DIVid="scrbody">
<ul>
	<li>
		<ahref="#"target="_blank">jQuery類似騰訊網的圖片幻燈特效（可自動播放）</a>
	</li>
	<li>
		<ahref="#/JS"target="_blank">VB版增強型Windows任務管理器</a>
	</li>
	<li>
		<ahref="#/JS/texiao"target="_blank">JQueryTip多風格鏈接提示框</a>
	</li>
	<li>
		<ahref="#/JS/ad"target="_blank">VC++動態載入、調用smtp.dll發郵件示例</a>
	</li>
	<li>
		<ahref="#/html+css"target="_blank">++連連看游戲源碼附外掛</a>
	</li>
	<li>
		<ahref="#/"target="_blank">基於API的VBHOOK鉤子攔截程序</a>
	</li>
	<li>
		<ahref="#/"target="_blank">VB操作系統的一些常用小技巧集</a>
	</li>
	<li>
		<ahref="#/js"target="_blank">xTree標準的WEB菜單樹（樹形菜單）</a>
	</li>
</ul>
</DIV>
</DIV>
<scripttype="text/javascript">
function$(id)
{
returndocument.getElementById(id);
}
varanndelay=3000;
varanncount=0;
varannheight=24;
varannst=0;
functionannouncementScroll()
{
if(!annst)
{
$('scrbody').innerHTML+='<brstyle="clear:both"/>'+

$('scrbody').innerHTML;
$('scrbody').scrollTop=0;
if($('scrbody').scrollHeight>annheight*3)
{
annst=setTimeout('announcementScroll()',anndelay);
}
else
{
$('announcement').onmouseover=$('announcement').onmouseout=null;
}
return;
}
if(anncount==annheight)
{
if($('scrbody').scrollHeight-annheight<=$('scrbody').scrollTop)
{
$('scrbody').scrollTop=$('scrbody').scrollHeight/2-annheight;
}
anncount=0;
annst=setTimeout('announcementScroll()',anndelay);
}
else
{
$('scrbody').scrollTop++;
anncount++;
annst=setTimeout('announcementScroll()',10);
}
}
announcementScroll();
</script>


</BODY>
</HTML>

『伍』 用js做到無縫連接的輪播圖簡單嗎

嗯，只要你的js html css 技術可以那就挺簡單的。

『陸』 js中無縫滾動輪播圖有多少種做法

還有就是用原生js模仿jQuery寫一個動畫函數，最簡單版的就是：
var timer = null;
function ani(ele,target) {
clearInterval(ele.timer);
ele.timer = setInterval(function() {
var step = (target - ele.offsetLeft)/10;
step = step>0?Math.ceil(step):Math.floor(step);
ele.style.left = ele.offsetLeft + step + "px";
console.log(1);
if (Math.abs(target - ele.offsetLeft) <= Math.abs(step)) {
ele.style.left = target + "px";
clearInterval(ele.timer);
}
},30);
}
利用動畫實現圖片位置的移動，也是放一個圖片到前面。
第二個就是還是放一張圖到前面，然後把帶圖片的li定位；用一個arr[{left:0},{left:"200px"},{left:"400px"},{left:"600px"}];這樣的數組把值分別賦給li；要滾動的時候把arr的最後一項放到最前面，再依次賦值給li，加上過渡就是輪播了，當然直接跳的那一下把過渡關了才是無縫輪播。

『柒』 求助！如何用js讓新聞滾動無限循環，無縫對接

在網路上搜索 懶人圖庫 裡面有 無縫滾動

『捌』 使用JS如何實現文字無縫滾動

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.wrap{width:800px;height:500px;margin:200px auto 0;position: relative;border:1px solid #000;overflow: hidden;}
h1{position: absolute;left:800px;word-break: keep-all;}
</style>
<body>
<div class="wrap">
<h1>這是無縫滾動</h1>
<h1>這是無縫滾動</h1>
</div>
<script>
var wenzi=document.querySelectorAll("h1");
var speed1=0;
var speed2=0;
var flag=false;
setInterval(function(){
speed1-=10;
wenzi[0].style.left=800+speed1+"px";
wenzi[1].style.left=800+speed2+"px";
if(wenzi[0].offsetLeft==0){
flag=true;
}
if(flag){
speed2-=10;
}
if(wenzi[0].offsetLeft==0){
speed2=0;
}
if(wenzi[1].offsetLeft==0){
speed1=0;
}

},60)
</script>
</body>
</html>
純手敲 覺得有用可以點個贊啊

『玖』 js 無縫滾動只滾動一次

將代碼中的這段代碼
demo2.innerHTML=demo1.innerHTML //克隆demo1為demo2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0) //當滾動至demo1與demo2交界時
demo.scrollTop-=demo1.offsetHeight //demo跳到最頂端
else{
demo.scrollTop++
}
}
改成
function Marquee(){
demo.scrollTop++
}
就可以實現只滾動一內次的效果（到達底容部的時候不再滾動）

『拾』 jquery或者js圖片無縫滾動怎麼實現啊。

當最後一個顯示的時候把第一個放到最後一個的後面。jQuery： $("img:last").after($("img:first"));