js图片滚动播放(网页图片滚动播放)
怎么用JS脚本使多张图片滚动？
推荐使用marquee实现图片滚动,示例:
marquee
scrolldelay="100"
direction="up"
onmouseover="this.stop()"
onmouseout="this.start()"img
src="xxxxxxx"/marquee
其中scrolldelay="100"
===指滚动延迟时间,单位是毫秒ms,默认为90ms
direction="up"
===指滚动方向,默认从左往右,可取的值为:up,down,left,right
onmouseover="this.stop()"
===指鼠标悬停在图片上时,图片静止
onmouseout="this.start()"
===指鼠标离开图片时,图片运动
希望对您有所帮助
JavaScript代码实现图片循环滚动效果
1.概述
循环滚动图片，不仅可以增添Web页面的动态效果，而且可以节省页面空间，有效地保证在有限的页面中显示更多的图片。
2.技术要点
主要应用setTimeout()方法实现图片的循环滚动效果。setTimeout()方法的语法格式如下：
setTimeout（function,milliseconds,[arguments]）
参数说明：
a.
function：要调用的JavaScript自定义函数名称。
b.
Milliseconds：设置超时时间（以毫秒为单位）。
功能：经过超时时间后，调用函数。此值可以用clearTimeout()函数清除。
3.具体实现
（1）在页面的合适位置添加一个id属性为demo的div标记，并在该标记中添加表格及要要滚动显示的图片。关键代码如下：
div
id="demo"
style="
overflow:
hidden;
width:
455px;
height:
166px;"
table
border="0"
cellspacing="0"
cellpadding="0"
tr
td
valign="top"
id="marquePic1"
!--
要循环滚动的图片
--
table
width="455"
border="0"
align="center"
cellpadding="0"
cellspacing="0"
tr
align="center"
%for(int
i=1;i8;i++){%
td
img
src="Images/%=i%.jpg"
width="118"
height="166"
border="1"
/td
%}%
/tr
/table
/td
td
id="marquePic2"
width="1"/td
/tr
/table
/div
（2）编写自定义的JavaScript函数move()，用于实现无间断的图片循环滚动效果。speed数值越大图片滚动的越快，具体代码如下：
script
language="javascript"
var
speed=30
;
//设置间隔时间
marquePic2.innerHTML=marquePic1.innerHTML;
var
demo=document.getElementById("demo");
//获取demo对象
function
Marquee(n){
//实现图片循环滚动的方法
if(marquePic1.offsetWidth-demo.scrollLeft=0){
demo.scrollLeft=0;
}
else{
demo.scrollLeft=demo.scrollLeft+n;
}
}
var
MyMar=setInterval("Marquee(5)",speed);
demo.onmouseover=function()
{
//停止滚动
clearInterval(MyMar);
}
demo.onmouseout=function()
{
//继续滚动
MyMar=setInterval("Marquee(5)",speed);
}
/script
以上所述是小编给大家介绍的JavaScript代码实现图片循环滚动效果的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
js实现图片滚动效果
SCRIPT language="JavaScript"
var speed=50; //设置滚动速度
demo2.innerHTML=demo1.innerHTML //复制dome1为dome2
function Marquee(){
if(demo2.offsetTop-demo.scrollTop=0) //当滚动至dome1与dome2交界时
demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端
else{
demo.scrollTop++
}
}
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: 600; width: 180; background: #214984; color: #ffffff"
div id="demo1" align="center"
!-- 定义图片 --
/div
div id="demo2" align="center"/div
/div
简单的HTML+js图片轮播?
h5代码：
div id=“wrap”ul id=“list”li10/lili9/lili8/lili7/lili6/lili5/lili4/lili3/lili2/lili1/ul/div
css代码：
style type="text/css"@-webkit-keyframes move{0%{left:-500px;}100%{left:0;}}#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;overflow:
hidden;}#list{position:absolute;left:0;top:0;padding:0;margin:0;-webkit-animation:5s move infinite linear;width:200%;}#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微软雅黑';}#wrap:hover #list{-webkit-animation-play-state:paused;}/style
扩展资料：
轮播图是网站介绍其主要产品或重要信息的一种方式。简单的一点是，在网页的某一部分，会依次呈现几个带有重要信息的图片，这样访问者就可以快速了解网站想要表达的主要信息。各种新闻网站的头版头条也是以这种方式呈现的重要信息。
轮播图的实现方式：例如：有5张轮播的图片，每张图片的宽度为1024px，高度为512px。那么旋转的窗口大小应该是一张图片的大小，即1024×512，然后，将五张0px的图片水平连接，形成一张5120px宽、512px高的图片，最后，通过每次向左移动1024px，可以旋转大的合成图像。
参考资料来源：
百度百科-轮播
js图片无缝滚动的原理是什么
以垂直滚动为例：一组图片 控制它的滚动条进行滚动 且此时对这组图片进行复制并添加进原图片组中，现在就有两组图片了。你可以想象一下，现在滚动条继续滚动，原来那组图片最后一张图片已经滚至顶端且消失，复制的那组图片的第一张跟在原图最后一张图片后出现，此时你就能感觉到无缝滚动了，而就在此刻我们将滚动条高度设置为0（因为速度很快，所以不会出现停顿感），你感觉图片就这样一直不停的滚动下去了。关键点在于元素的复制、添加，以及滚动条距离的获取和修改。网上代码很多，都是基于这类构思
js实现图片自动的滚动效果
自动滚动，主要思路是用js自带的setInterval方法。
定义和用法
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数
code ? ?必需。要调用的函数或要执行的代码串。 ?
millisec ? ?必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 ?
返回值
一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。
简单的例子，仅供参考：
style????
*{?margin:0;?padding:0;?list-style:none;}????
#box{?width:840px;?border:1px?solid?#000;?height:210px;?margin:30px?auto;?position:relative;?overflow:hidden;}????
#box?ul{?position:absolute;?left:0;?top:0;}????
#box?ul?li{?width:200px;?height:200px;?float:left;?padding:5px;}????
/style????
script????
window.onload=function(){????
var?oBox=document.getElementById('box');????
var?oUl=oBox.children[0];????
var?aLi=oUl.children;????
//复制一份内容????
oUl.innerHTML+=oUl.innerHTML;????
oUl.style.width=aLi.length*aLi[0].offsetWidth+'px';????
setInterval(function(){????
var?l=oUl.offsetLeft+10;????
if(l=0){????
l=-oUl.offsetWidth/2;????
}????
oUl.style.left=l+'px';????
},30);????
};????
/script????
/head????
body????
div?id="box"????
ul????
??? liimg?src="img/1.jpg"?width="200"/li????
???????liimg?src="img/2.jpg"?width="200"/li????
???????liimg?src="img/3.jpg"?width="200"/li????
???????liimg?src="img/4.jpg"?width="200"/li????
???????????
???/ul????
/div????
/body