您的位置：首页 > Web前端 > JavaScript

js 图片滚动详解

2014-03-22 15:20 239 查看

图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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;
/*
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

关于float请看以下代码，就明白float的具体含义了：

<html>

<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>

*/
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中是获区元素的宽

关于offsetwidth：

obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflow 而未显示的部分，也就是其实际占据的宽度，整型，单位像素。具体算法请参见 offsetWidth、offsetHeight 算法。

* scrollLeft 就是 <div id="demo"> 形成的滚动条向左边的偏移距离，单位是像素

具体可以看一下以下实例就明白了：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").scrollLeft(100);
  });
});
</script>
</head>
<body>
<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
</div>
<button class="btn1">把滚动条的水平位置设置为 100px</button>
</body>
</html>

* 先分析第101行， “++” 表示自增长1，比如2++，这句运行后就是3了，同样还有++2，区别就是执行的时间先后。
* 所以tab.scrollLeft++表示像做偏移量+1，即像左移动一个像素
*/

/*
* if判断语句，大概意思是如果滚到头了，就重新把他的偏移距离，下面滚动条，返回到原处，否则就继续想做滚动。这样才能形成一个不间歇的滚动。
*/
if(tab2.offsetWidth-tab.scrollLeft<=0){
tab.scrollLeft-=tab1.offsetWidth;  //此处是tab1.offsetWidth而不是tab2的，个人认为两个div大小不一样，将1复制到2中，从理论上讲应该是2大于等于才可以。

}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>

声明：此文章是在以下链接中进行补充的

转自以下链接：
本文链接：http://www.daixiaorui.com/read/13.html +复制链接

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html javascript

相关文章推荐

新的分享

章节导航