这篇文章主要介绍了 JS 实现图片无间断滚动代码汇总, 非常实用的特效代码, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文整理汇总了 JavaScript 实现图片滚动的常见代码,可以实现向上下左右四个方向的无缝滚动的效果,这是前端设计开发时常用的一个图片特效,你可只用其中的一种滚动效果。
具体的实例代码如下:
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN">
- <head>
- <title>
- 图片滚动代码合集
- </title>
- <script type="text/javascript">
- // 自动滚动
- function boxmove(d1, d2, d3, e, obj) {
- var speed = 30;
- var demo = document.getElementById(d1);
- var demo1 = document.getElementById(d2);
- var demo2 = document.getElementById(d3);
- demo2.innerHTML = demo1.innerHTML;
- function boxTop() {
- if (demo2.offsetTop - demo.scrollTop <= 0) {
- demo.scrollTop -= demo1.offsetHeight
- } else {
- demo.scrollTop++
- }
- }
- function boxRight() {
- if (demo.scrollLeft <= 0) {
- demo.scrollLeft += demo2.offsetWidth
- } else {
- demo.scrollLeft--
- }
- }
- function boxBottom() {
- if (demo1.offsetTop - demo.scrollTop >= 0) {
- demo.scrollTop += demo2.offsetHeight
- } else {
- demo.scrollTop--
- }
- }
- function boxLeft() {
- if (demo2.offsetWidth - demo.scrollLeft <= 0) {
- demo.scrollLeft -= demo1.offsetWidth
- } else {
- demo.scrollLeft++
- }
- }
- if (e == 1) {
- var MoveTop = setInterval(boxTop, speed);
- demo.onmouseover = function() {
- clearInterval(MoveTop);
- }
- demo.onmouseout = function() {
- MoveTop = setInterval(boxTop, speed)
- }
- }
- if (e == 2) {
- var MoveRight = setInterval(boxRight, speed);
- demo.onmouseover = function() {
- clearInterval(MoveRight)
- }
- demo.onmouseout = function() {
- MoveRight = setInterval(boxRight, speed)
- }
- }
- if (e == 3) {
- var MoveBottom = setInterval(boxBottom, speed);
- demo.onmouseover = function() {
- clearInterval(MoveBottom);
- }
- demo.onmouseout = function() {
- MoveBottom = setInterval(boxBottom, speed)
- }
- }
- if (e == 4) {
- var MoveLeft = setInterval(boxLeft, speed) demo.onmouseover = function() {
- clearInterval(MoveLeft)
- }
- demo.onmouseout = function() {
- MoveLeft = setInterval(boxLeft, speed)
- }
- }
- if (e == "top") {
- MoveTop = setInterval(boxTop, speed) obj.onmouseout = function() {
- clearInterval(MoveTop);
- }
- }
- if (e == "right") {
- MoveRight = setInterval(boxRight, speed) obj.onmouseout = function() {
- clearInterval(MoveRight);
- }
- }
- if (e == "bottom") {
- MoveBottom = setInterval(boxBottom, speed) obj.onmouseout = function() {
- clearInterval(MoveBottom);
- }
- }
- if (e == "left") {
- MoveLeft = setInterval(boxLeft, speed) obj.onmouseout = function() {
- clearInterval(MoveLeft);
- }
- }
- }
- </script>
- <style type="text/CSS">
- div#a,div#b,div#c,div#d { float:left;} h2 { clear:both; } div#b,div#d,div#bb
- { white-space:nowrap; }
- </style>
- </head>
- <body>
- <h1>
- 滚动合集
- </h1>
- <hr />
- <h2>
- 向上
- </h2>
- <div id="a" style="overflow:hidden;height:100px;width:90px;">
- <div id="a1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="a2">
- </div>
- </div>
- <script type="text/javascript">
- boxmove("a", "a1", "a2", 1);
- </script>
- <h2>
- 向右
- </h2>
- <div id="b" style="overflow:hidden;height:100px;width:90px;">
- <div id="b1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="b2">
- </div>
- </div>
- <script type="text/javascript">
- boxmove("b", "b1", "b2", 2);
- </script>
- <h2>
- 向下
- </h2>
- <div id="c" style="overflow:hidden;height:100px;width:90px;">
- <div id="c1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="c2">
- </div>
- </div>
- <script type="text/javascript">
- boxmove("c", "c1", "c2", 3);
- </script>
- <h2>
- 向左
- </h2>
- <div id="d" style="overflow:hidden;height:100px;width:90px;">
- <div id="d1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="d2">
- </div>
- </div>
- <script type="text/javascript">
- boxmove("d", "d1", "d2", 4);
- </script>
- <h2>
- 手动滚动 -
- <strong onmouseover="boxmove('aa','aa1','aa2','top',this);">
- 上
- </strong>
- <strong onmouseover="boxmove('aa','aa1','aa2','bottom',this);">
- 下
- </strong>
- </h2>
- <div id="aa" style="overflow:hidden;height:100px;width:90px;">
- <div id="aa1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="aa2">
- </div>
- </div>
- <h2>
- 手动滚动 -
- <strong onmouseover="boxmove('bb','bb1','bb2','left',this);">
- 左
- </strong>
- <strong onmouseover="boxmove('bb','bb1','bb2','right',this);">
- 右
- </strong>
- </h2>
- <div id="bb" style="overflow:hidden;height:100px;width:90px;">
- <div id="bb1">
- <img src="/images/logo.gif1" alt="" />
- <img src="/images/logo.gif2" alt="" />
- <img src="/images/logo.gif3" alt="" />
- <img src="/images/logo.gif4" alt="" />
- <img src="/images/logo.gif5" alt="" />
- <img src="/images/logo.gif6" alt="" />
- <img src="/images/logo.gif7" alt="" />
- <img src="/images/logo.gif8" alt="" />
- </div>
- <div id="bb2">
- </div>
- </div>
- </body>
- </html>
来源: