轮播图无缝滚动怎么写

1. 【HTML】如何实现无缝循环的图片滚动效果

网站中，有时为了更好的利用有限的页面空间展示更多的内容，也为了丰富网站页面自身的表现样式，我们往往会用到图片滚动的效果。想要实现这种效果，只需要在想要显示的表格或网页中加入以下代码即可实现： <div id=demo style="overflow:hidden;height:100px;width:300px;"><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0053_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0054_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0058_缩小大小.JPG" /> <img height="200" alt="" width="150" src="/lazysite/user_space/7788/CIMG0059_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0063_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0070_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0071_缩小大小.JPG" /> <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0072_缩小大小.JPG" /> //这个图片的地址可以是相对的也可以是绝对的 </td><td id=demo2 valign=top></td></tr></table></div><script>var speed=30 demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo2.offsetWidth-demo.scrollLeft<=0) demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed) demo.onmouseover=function() {clearInterval(MyMar)} demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}</script>下面，我们就上面代码的主要部分进行分析： <div id=demo style="overflow:hidden;height:100px;width:300px;"> 这段代码中下划线的部分表示我们这段滚动图片所占用区域的大小。用户可根据页面的实际需要进行调节。但一般情况下至少要大于或等于图片的高度和宽度。 <img height="150" alt="" width="200" src="/lazysite/user_space/7788/CIMG0056_缩小大小.JPG" /> 上面这段代码是图片的代码。每加入一行如上代码，那就会多出一个展示的图片。图片可以是一个，也可以是无数个。需要强调的是，每个图片的高度和宽度应尽量的统一大小，主要显示出来的效果才会更好看。 var speed=30 这行代码是控制图片滚动的速度。数字越小，滚动的也就越快；相反，数字越大，滚动的也就越慢。

2. 网页如何实现图片无缝滚动

在body里写

<div id=demo style="overflow:hidden;height:300px;width:1250px;"><table align=left
cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="D:\tuPian\20096515527.jpg" ><img
src="D:\tuPian\20096515540.jpg"><img src="D:\tuPian\200953120049.jpg"><img src="D:\tuPian\200953120723.jpg"><img src="D:\tuPian\200953120646.jpg"><img
src="D:\tuPian\200953120655.jpg"><img src="D:\tuPian\200953120658.jpg"></td><td id=demo2 valign=top></td></tr></table></div>

<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

希望能帮到您

3. html图片向左无缝隙循环滚动代码

用css3实现循环滚动效果：

css：

#wrap{

width:200px;

height:150px;

border:1pxsolid#000;

position:relative;

margin:100pxauto;

overflow:hidden;

}

#list{

position:absolute;

left:0;

top:0;

margin:0;

padding:0;

animation:move12sinfinitelinear;

-webkit-animation:move12sinfinitelinear;

width:500%;

}

#listli{

list-style:none;

width:200px;

height:150px;

border:0;

float:left;

}

@-webkit-keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

}

@keyframesmove{

0%{

left:0;

}

100%{

left:-800px;

}

}

#wrap:hover#list{

-webkit-animation-play-state:paused;/*动画暂停播放*/

}

html：

<divid="wrap">

<ulid="list">

<li><ahref="#"><imgsrc="img/1.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/2.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/3.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/4.jpg"border="0"/></a></li>

<li><ahref="#"><imgsrc="img/5.jpg"border="0"/></a></li>

</ul>

</div>

(3)轮播图无缝滚动怎么写扩展阅读：

animation（动画）属性：

语法：

animation: name ration timing-function delay iteration-count direction fill-mode play-state;

参数：

1、animation-name：指定要绑定到选择器的关键帧的名称。

2、animation-ration：动画指定需要多少秒或毫秒完成。

3、animation-timing-function：设置动画将如何完成一个周期。

值：

linear：动画从头到尾的速度是相同的。

ease：默认。动画以低速开始，然后加快，在结束前变慢。

ease-in：动画以低速开始。

ease-out：动画以低速结束。

ease-in-out：动画以低速开始和结束。

cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

4、animation-delay：设置动画在启动前的延迟间隔。

5、animation-iteration-count ：定义动画的播放次数。

值：

n：一个数字，定义应该播放多少次动画。

infinite：指定动画应该播放无限次（永远） 。

4. html图片无缝滚动代码怎么写

marquee和js两种方法，我建议使用的，marquee兼容性不好，只兼容IE浏览器。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<metacharset="utf-8"/>
<TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE>
</HEAD>
<BODY>
用marquee实现首尾相连循环滚动效果（仅IE）：<br/><br/>
<MARQUEEbehavior="scroll"contenteditable="true"onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"scrollamount="3"width="100"><SPANunselectable="on"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"><imgsrc="img/menu_trigger.png"></SPAN></MARQUEE>
<br/><br/>用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br/><br/>
<DIVid="scrollobj"style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV>
<scriptlanguage="javascript"type="text/javascript">
<!--
	functionscroll(obj){
		vartmp=(obj.scrollLeft)++;
		//当滚动条到达右边顶端时
		if(obj.scrollLeft==tmp)obj.innerHTML+=obj.innerHTML;
		//当滚动条滚动了初始内容的宽度时滚动条回到最左端
		if(obj.scrollLeft>=obj.firstChild.offsetWidth)obj.scrollLeft=0;
	}
	setInterval("scroll(document.getElementById('scrollobj'))",20);
//-->
</script>
</BODY>
</HTML>

望采纳！

5. 求教大神，想做一个无缝滚动的代码，怎么写啊。

marquee和js两种方法，我建议使用js的，marquee兼容性不好，只兼容IE浏览器。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><meta charset="utf-8" /><TITLE>分别用marquee和div+js实现首尾相连循环滚动效果</TITLE></HEAD><BODY>用marquee实现首尾相连循环滚动效果（仅IE）：<br /><br /><MARQUEE behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" scrollamount="3" width="100"><SPAN unselectable="on"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"><img src="img/menu_trigger.png"></SPAN></MARQUEE><br /><br />用DIV+javascript实现首尾相连循环滚动效果（兼容firefox）：<br /><br /><DIV id="scrollobj" style="white-space:nowrap;overflow:hidden;width:500px;"><span>这里是要滚动的内容</span></DIV><script language="javascript" type="text/javascript"><!-- function scroll(obj) { var tmp = (obj.scrollLeft)++; //当滚动条到达右边顶端时 if (obj.scrollLeft==tmp) obj.innerHTML += obj.innerHTML; //当滚动条滚动了初始内容的宽度时滚动条回到最左端 if (obj.scrollLeft>=obj.firstChild.offsetWidth) obj.scrollLeft=0; } setInterval("scroll(document.getElementById('scrollobj'))",20);//--></script></BODY></HTML>

望采纳！

6. 网页轮播图无缝衔接的代码怎么写

<title>无缝轮播图</title><style>*{margin: 0;padding:0; }ul{list-style: none;}.banner{width: 600px;height: 300px;border: 2px solid #ccc;margin: 100px auto;position: relative;overflow: hidden;}.img{position: absolute;top: 0;left: 0}.img li{float: left;}.num{position: absolute;bottom: 10px;width: 100%;text-align: center;font-size: 0;}.num li{width: 10px;height: 10px;background:rgba(0,0,0,0.5);display: block;border-radius: 100%;display: inline-block;margin: 0 5px;cursor: pointer;}.btn{display: none;}.btn span{display: block;width: 50px;height: 100px;background: rgba(0,0,0,0.6);color: #fff;font-size: 40px;line-height: 100px;text-align: center;cursor:pointer;}.btn .prev{position: absolute;left: 0;top: 50%;margin-top: -50px;}.btn .next{position: absolute;right: 0;top: 50%;margin-top: -50px;}.num .active{background-color: #fff;}</style><script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script></head><body><div class="banner"><ul class="img"><li><a href="#"><img src="img/1.jpg" alt="第1张图片"></a></li><li><a href="#"><img src="img/2.jpg" alt="第2张图片"></a></li><li><a href="#"><img src="img/3.jpg" alt="第3张图片"></a></li><li><a href="#"><img src="img/4.jpg" alt="第4张图片"></a></li><li><a href="#"><img src="img/5.jpg" alt="第5张图片"></a></li></ul><ul class="num"></ul> //<div class="btn"><span class="prev"><</span><span class="next">></span></div></div><script>$(function(){var i=0;var timer=null;for (var j = 0; j < $('.img li').length; j++) { //创建圆点$('.num').append('<li></li>')}$('.num li').first().addClass('active'); //给第一个圆点添加样式var firstimg=$('.img li').first().clone(); //复制第一张图片$('.img').append(firstimg).width($('.img li').length*($('.img img').width())); //将第一张图片放到最后一张图片后，设置ul的宽度为图片张数*图片宽度// 下一个按钮$('.next').click(function(){i++;if (i==$('.img li').length) {i=1; //这里不是i=0$('.img').css({left:0}); //保证无缝轮播，设置left值};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) { //设置小圆点指示$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}})// 上一个按钮$('.prev').click(function(){i--;if (i==-1) {i=$('.img li').length-2;$('.img').css({left:-($('.img li').length-1)*600});}$('.img').stop().animate({left:-i*600},300);$('.num li').eq(i).addClass('active').siblings().removeClass('active');})//设置按钮的显示和隐藏$('.banner').hover(function(){$('.btn').show();},function(){$('.btn').hide();})//鼠标划入圆点$('.num li').mouseover(function(){var _index=$(this).index();$('.img').stop().animate({left:-_index*600},150);$('.num li').eq(_index).addClass('active').siblings().removeClass('active');})//定时器自动播放timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000)//鼠标移入，暂停自动播放，移出，开始自动播放$('.banner').hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){i++;if (i==$('.img li').length) {i=1;$('.img').css({left:0});};$('.img').stop().animate({left:-i*600},300);if (i==$('.img li').length-1) {$('.num li').eq(0).addClass('active').siblings().removeClass('active');}else{$('.num li').eq(i).addClass('active').siblings().removeClass('active');}},1000)})})</script>

7. 图片无缝滚动代码

<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.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
<a href="#"><img src="http://www.cnrui.cn/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>

8. dw中无缝滚动的代码怎么写

网页无缝滚动一般是用JS写的。下面给一段你参考。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#marquee{width:562px; height:202px; margin:0 auto; position:relative; border:1px solid #000;}
#marquee ul{padding:0; margin:0; list-style-type:none; position:absolute; left:0;}
#marquee ul li{width:140px; height:200px; float:left;}
</style>
<script>
window.onload=function ()
{
var aUl=document.getElementById('marquee').getElementsByTagName('ul')[0]; //获取 div中的ul，要让图片滚动其实就是改变ul的left值。
var aLi=aUl.getElementsByTagName('li');
var iSpeed=3;
var timer=null;

aUl.innerHTML+=aUl.innerHTML; //复制一份ul
aUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //使ul的宽度为所有li的宽度的总和
function autoMove() //定义一个函数，让ul动起来。
{
aUl.style.left=aUl.offsetLeft-iSpeed+'px'; // 让ul的left减去3，现在只是减一次。
if(aUl.offsetLeft<-aUl.offsetWidth/2)
{
aUl.style.left=0; //做一个判断如果如果ul的left过了他自身宽度的一半，把他的left拉回来，变成0.
};
};
timer=setInterval(autoMove,30); // 开一个定时器让之前的函数每隔0.03秒执行一次。从而实现不断滚动。
aUl.onmouseover=function () // 让鼠标移到ul上停止滚动
{
clearInterval(timer);
};
aUl.onmouseout=function () //移出时重新滚动。
{
timer=setInterval(autoMove,30);
};
};
</script>
</head>
<body>
<div id="marquee">
<ul>
<li><img src="1" height="200" width="140" alt="图片" /></li>
<li><img src="1" height="200" width="140" alt="图片" /></li>
<li><img src="1" height="200" width="140" alt="图片" /></li>
<li><img src="1" height="200" width="140" alt="图片" /></li>
<li><img src="1" height="200" width="140" alt="图片" /></li>
</ul>
</div>
</body>
</html>

9. 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，加上过渡就是轮播了，当然直接跳的那一下把过渡关了才是无缝轮播。