图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
#demo {
background: #FFF;
overflow:hidden;
/*
* overflow 属性规定当内容溢出元素框时发生的事情。
* hidden 内容会被修剪，并且其余内容是不可见的。
* scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
* hidden 和 scroll的区别详见“范例2-scrollLeft讲解”
*/
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="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/10.jpg" border="0" /></a>
<a href="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/11.jpg" border="0" /></a>
<a href="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/16.jpg" border="0" /></a>
<a href="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/17.jpg" border="0" /></a>
<a href="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/19.jpg" border="0" /></a>
<a href="https://www.daixiaorui.com/" target="_blank"><img src="https://www.daixiaorui.com/Public/images/random/20.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=30; //滚动的速度,数字越小快，前面的var为定义一个变量，是固定的语法
var tab=document.getElementById("demo"); //获取id为demo的div
var tab1=document.getElementById("demo1"); //获取id为demo1的div
var tab2=document.getElementById("demo2"); //获取id为demo1的div
/*
* innerHTML是获取HTML当前标签的起始和结束里面的内容。比如：
* <p id='abc'>你们好啊！！<span>2013年</span></p>
* 那么上面 p 的 innerHTML 就是 “你们好啊！！<span>2013年</span>” 。
*
* 这里的意思就是把 <div id="demo1"></div> 里面的内容复制到 <div id="demo2"></div>
* 这样滚动才能
*/
tab2.innerHTML=tab1.innerHTML;
/*
* setInterval()是一个函数(方法),该函数有两个参数：setInterval(code,millisec)
* code：必需。要调用的函数或要执行的代码串。
* millisec：必需。周期性执行或调用 code 之间的时间间隔，以毫秒计。
* setInterval()方法会不停地调用函数，直到 clearInterval() 被调用或浏览器窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。&注释1&
* &注释1& 这句话的意思，比如：我想让网页每2秒弹出一个“您好”的对话框，直到用户点击停止按钮后，就停止弹出。
* /--- example start >>
<input type="button" value="停止" onclick="clearBox()" />
<script type='text/javascript'>
woshiID = setInterval(tanchu,2000); //单位毫秒，2000毫秒即为2秒，
function tanchu(){
//我是一个函数，用来弹出对话框
alert("您好");
}
function clearBox(){
//我是一个函数，用来清除定时器，不让他弹出了
clearInterval(woshiID);
}
<////script>
*
* /--- example End >> 友情提示：该范例详见“范例1-setInterval讲解”。
*
* 所以 var MyMar=setInterval(Marquee,speed);就是每30毫秒调用一次Marquee函数，并产生一个id “MyMar”
*
*/
var MyMar=setInterval(Marquee,speed);
function Marquee(){
/*
* offsetwidth在JS中是获区元素的宽
* scrollLeft 这个我也不是很理解，大概就是 <div id="demo"> 形成的滚动条向左边的偏移距离吧，单位是像素
* 先分析第101行， “++” 表示自增长1，比如2++，这句运行后就是3了，同样还有++2，区别就是执行的时间先后。
* 所以tab.scrollLeft++表示像做偏移量+1，即像左移动一个像素
*/
/*
* if判断语句，大概意思是如果滚到头了，就重新把他的偏移距离，下面滚动条，返回到原处，否则就继续想做滚动。这样才能形成一个不间歇的滚动。
*/
if(tab2.offsetWidth-tab.scrollLeft<=0){
tab.scrollLeft-=tab1.offsetWidth;
}else{
tab.scrollLeft++;
}
}
/*
* 由46行可知，tab对应的id为<div id="demo">
* onmouseover意思是鼠标的光标经过时触发的一个事件响应
* 因此，这句话意思是，当鼠标移到id为demo的div上（即滚动区域）时，清除 MyMar 对应的这个定时器，即 此时停止滚动
*/
tab.onmouseover=function() {clearInterval(MyMar)};
/*
* onmouseover意思是鼠标的光标离开时触发的一个事件响应
* 因此，这句话意思是，当鼠标离开时，重新设定一个名相同的(MyMar)定时器，即此时又恢复滚动
*/
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
</script>
</body>
</html>
源码及范例下载：
滚动范例.zip
最后说明一下，多个滚动可以把下面script部分封装成一个函数，调用就行了。具体参考压缩文件里面的范例吧。
大半夜写文章累啊，更何况都是原创的！！亲，给个好评吧！
文章出自：https://www.daixiaorui.com/read/13.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。
博主的敬业精神是值得学习的。太多值得我学习的了。
2013-07-31 13:14:53 @回复