图片滚动幻灯这些几乎是每个网站都会用到的一种效果,我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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  @回复