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"));