js图片滚动详细介绍

图片滚动幻灯这些几乎是每个网站都会用到的一种效果，我们公司做站也经常得用到。有些时候找一段兼容的滚动代码也是一件头疼的事情。其实我今天要讲的这个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="停止" οnclick="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.οnmοuseοver=function() {clearInterval(MyMar)};/** onmouseover意思是鼠标的光标离开时触发的一个事件响应* 因此，这句话意思是，当鼠标离开时，重新设定一个名相同的(MyMar)定时器，即此时又恢复滚动*/
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};</script>
</body>
</html>

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

转自以下链接：

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

js图片滚动详细介绍相关推荐

简洁的JS图片滚动代码
非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止. 它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的有用. <!DOCT ...
js图片滚动无缝衔接
js图片滚动无缝衔接 <style>*{margin:0;padding:0;}div{width:600px;height:200px;position:relative;border: ...
常用JS图片滚动（无缝、平滑、上下左右滚动）
常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 <head> <-----> </head> <body> <!--向下滚动代码开始--&g ...
常用JS图片滚动代码大全
原文地址:http://www.codefans.net/jscss/code/1801.shtml 本源代码收集了一些常用的网页图片滚动,无缝滚动,效果很平滑,包括上下左右四个方向的滚动,或许你现在 ...
常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全
今天刚网上看的不多说直接帖代码---- <head> <-----> </head> <body>  < ...
Js 箭头函数详细介绍（多种使用场景差异，你学会了吗？）
简要认识箭头函数是在ES6中添加的一种规范,简化了匿名函数定义的写法. 基本格式完整写法 let fn = (x,y) => {return x + y; }//function()写法 l ...
一款JS+CSS实现的无缝平滑图片滚动代码
代码简介: 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据库动态调用每张图片的地址,方便控制,因此它非常的应用. 代码内容 ...
10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码（三）
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
web图片裁切插件 cropper.js 详细介绍
cropper.js一个用来处理图片的插件,可以使用它来实现图片的各种模式下的裁切效果,当我们在做一个上传头像或者上传图片功能的时候,需要用户裁切出用户想要的图片位置就可以利用这个插件来实现','cr ...

js图片滚动详细介绍

js图片滚动详细介绍相关推荐

最新文章

热门文章