js 图片滚动实现
2014-03-22 15:37
288 查看
图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/10.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/11.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/16.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/17.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/19.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://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>
声明：转载时本人进行了增加。
本文链接自：
本人试着对div indemo有效，对demo操作无效。
本文链接：http://www.daixiaorui.com/read/13.html +复制链接
本文链接：http://www.daixiaorui.com/read/13.html +复制链接
<!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="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/10.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/11.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/16.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/17.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://www.daixiaorui.com/Public/images/random/19.jpg" border="0" /></a>
<a href="http://www.daixiaorui.com/" target="_blank"><img src="http://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>
声明：转载时本人进行了增加。
本文链接自：
本人试着对div indemo有效，对demo操作无效。
本文链接：http://www.daixiaorui.com/read/13.html +复制链接
本文链接：http://www.daixiaorui.com/read/13.html +复制链接
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS实现的相册图片左右滚动完整实例
- 基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
- js实现图片无缝滚动特效
- js 脚本实现图片联系滚动代码
- JS实现图片无缝滚动效果
- 【转】js实现图片滚动效果
- js 实现文字无缝滚动(图片无缝滚动) 兼容各种浏览器
- JS实现图片滚动效果
- js实现图片无缝滚动
- js实现图片无缝滚动
- JS实现图片无间断滚动代码汇总
- JS实现的相册图片左右滚动完整实例
- JS+CSS实现4张图片滚动切换代码
- js两种实现网页图片滚动的方法 和一种切换的方法
- flash+js实现图片横向滚动显示
- js 图片滚动的实现（整理别人的代码而得）
- js实现图片向上连续滚动特效代码(含注释)
- js+div实现图片滚动效果代码
- js实现图片的无缝轮播滚动