现在的位置: 首页 -> 前端学习 -> JS前端 -> 一个超详细的js图片滚动示例讲解

一个超详细的js图片滚动示例讲解

2013-07-28 00:37评论数 1 ⁄ 被浏览 12644 views+

图片滚动幻灯这些几乎是每个网站都会用到的一种效果,我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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 本站所有文章,除注明出处外皆为原创,转载请注明本文地址,版权所有。

目前有 1 条评论  @我要评论

  1. 1楼84803220 : 2013-07-31 10:15:56 评论说: @回复

    博主的敬业精神是值得学习的。太多值得我学习的了。

    回复留言标识 Dai 回复 84803220: 谢谢支持!我会继续努力的

    2013-07-31 13:14:53  @回复

您的每一个评论都是对我的一份支持

 博客二维码

昵称 *

邮箱 *