本文目录
- js图片无缝滚动的原理是什么
- js实现图片自动的滚动效果
- 求js一排多张图片向上滚动代码！不是单张的是多张的！
- js实现图片左右滚动
- 怎样用JavaScript实现图片的滚动效果
- 求个JS图片滚动的代码要简单简单再简单、！！！！
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;
var aLi=oUl.children;
//复制一份内容
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi.length*aLi.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》
《li》《img src=“img/1.jpg“ width=“200“》《/li》
《li》《img src=“img/2.jpg“ width=“200“》《/li》
《li》《img src=“img/3.jpg“ width=“200“》《/li》
《li》《img src=“img/4.jpg“ width=“200“》《/li》
《/ul》
《/div》
《/body》
求js一排多张图片向上滚动代码！不是单张的是多张的！
假设你要滚动的图片的id是“pic1“-“picn“ n》=1
function Slide()
{
for （i=1;i《=n;i++) //n是图片数
{
idd=“pic“+i; //生成图片ID
toppx=parseInt(document.getElementById(idd).style.top.replace(’px’, ’’)); //获取图片top属性，并去掉属性之后的px，并转换成整型变量
toppx--; // top-1
if （toppx==???) //???是一个数字，当图片完全滚出显示范围，就把图片的top变成一个图片群(多行pic)下方的位置，实现循环滚动
{
toppx=???; //图片群的下方的位置
}
document.getElementById(idd).style.top=toppx+’px’; //新的top值送回图片，实现上滚
}
}
另外记得，这样写，需要把图片的top属性写在html里面，写在css里面是读不到的，但是这样写避免了不同浏览器中获取css中属性的方法不同的问题，有利有弊。
当需要滚动时执行：s=setInterval(’Slide()’,50);
当需要停止滚动时执行：window.clearInterval(s);
js实现图片左右滚动
代码：
《title》《/title》
《style》
body{
margin:0;
padding:0;
background-color:transparent;
}
div{
width:350px;
overflow:hidden;
}
table img{
width:100px;
height:100px;
}
《/style》
《/head》
《body》
《div id=“picScroll“》
《table》
《tr》
《td》《a》《img src=“../pic/1.jpg“ /》《/a》《/td》
《td》《a》《img src=“../pic/2.jpg“》《/a》《/td》
《td》《a》《img src=“../pic/3.jpg“》《/a》《/td》
《td》《a》《img src=“../pic/4.jpg“》《/a》《/td》
《td》《a》《img src=“../pic/5.jpg“》《/a》《/td》
《/tr》
《/table》
《/div》
《/body》
《/html》
《script》
var target = $(’#picScroll’);
var left = 0;
var speed = 30;
function Marqeen() {
if (target.offsetWidth 《= left) {
left -= target.offsetWidth;
}
else {
left++;
}
target.scrollLeft(left);
}
$(function () {
var marQueen = window.setInterval(Marqeen, speed);
target.mouseover(function () {
clearInterval(marQueen);
});
target.mouseout(function () {
marQueen = window.setInterval(Marqeen, speed);
});
});
《/script》
怎样用JavaScript实现图片的滚动效果
直接给你一段简单的代码，不懂再问
《html》
《head》
《title》图片滚动 《/title》
《style》
#div1
{position:relative;width:650px;height:210px;overflow:hidden;
}
#div2{position:absolute;}
li{float:left;list-style-type:none;padding:5px;}
img{border:none;}
#div2 li a:hover{top:-10px;}
a{position:relative;}
《/style》
《script》
window.onload=function()
{
var odiv2=document.getElementById(’div2’);
var ali=odiv2.getElementsByTagName(’li’);
var aspeed=-5;
var timer=null;
odiv2.innerHTML+=odiv2.innerHTML;
odiv2.style.width=ali.offsetWidth*ali.length+’px’;
odiv2.onmouseover=function(){clearInterval(timer);};
function a()
{
timer=setInterval(function()
{
odiv2.style.left=odiv2.offsetLeft+aspeed+’px’;
if (odiv2.offsetLeft《-odiv2.offsetWidth/2)
{
odiv2.style.left=’0px’;
}
},30);};
odiv2.onmouseout=a;
a();
}
《/script》
《/head》
《body》
《div id=’div1’》
《div id=’div2’》
《li》《a href=““》《img src=“1.jpg“ /》《/a》《/li》
《li》《a href=““》《img src=“2.jpg“ /》《/a》《/li》
《li》《a href=““》《img src=“3.jpg“ /》《/a》《/li》
《li》《a href=““》《img src=“4.jpg“ /》《/a》《/li》
《/div》
《/div》
《/body》
《/html》
求个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》
《/head》
《body》
《table border=“0“ cellspacing=“0“ cellpadding=“0“ height=“215“》
《tr》
《td valign=“top“ align=“left“》
《DIV id=“dome“ style=“overflow:hidden;height:370px; width:190px; text-align:center“》
《DIV id=“dome1“ 》《img src=“img/pic1.jpg“ width=“180px“ height=“130px“ /》《br/》《img src=“img/pic2.jpg“ width=“180px“ height=“130px“ /》《br/》《img src=“img/pic3.jpg“ width=“180px“ height=“130px“ /》《/DIV》
《DIV id=“dome2“》《/DIV》
《/DIV》
《/td》
《/tr》
《/table》
《script type=“text/javascript“》
var speed=50; //设置文字滚动速度
dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
function Marquee(){
if(dome2.offsetTop-dome.scrollTop《=0) //当滚动至dome1与dome2交界时
dome.scrollTop-=dome1.offsetHeight //dome跳到最顶端
else{
dome.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed) //设置定时器
dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动
《/script》
《/body》
《/html》
