js 无缝滚动,图片无缝滚动,文字无缝滚动,基于 js 代码如何实现,本篇文章给大家详解 js 代码实现无缝滚动 (文字和图片),需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一款适用于方案和图片的 JS 无缝滚动代码,可控制向左或向右滚动,代码不算复杂,而且本无缝滚动代码兼容性也挺好,你几乎不需要修改什么代码,就能使用了。测试时候把那些带标号的方块都改成图片吧,这样就更有感觉了。
代码如下:
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 无缝滚动
- </title>
- <style>
- * { margin: 0; padding: 0; } .other { width: 100%; height: 50px; background:
- #F00; } .main { width: 400px; height: 130px; margin: 0 auto; border: 1px
- solid #000; overflow: hidden; position: relative; } .banner a { display:
- block; float: left; margin: 15px 0 0 15px; } .banner { position: absolute;
- width: 800%; } #wrap1, #wrap2 { float: left; } .text { text-align: center;
- } #wrap1 a, #wrap2 a { text-decoration: none; } #wrap1 span, #wrap2 span
- { display: block; width: 100px; height: 100px; border: 1px solid #000;
- font-size: 36px; text-align: center; background: #999; }
- </style>
- </head>
- <body>
- <div class="other">
- </div>
- <div class="text">
- <a href="javascript:void(0)" id="left">
- 向左
- </a>
- <a href="javascript:void(0)" id="right">
- 向右
- </a>
- </div>
- <div class="main" id="main">
- <div class="banner" id="banner">
- <div id="wrap1">
- <a href="#">
- <span>
- 1
- </span>
- </a>
- <a href="#">
- <span>
- 2
- </span>
- </a>
- <a href="#">
- <span>
- 3
- </span>
- </a>
- <a href="#">
- <span>
- 4
- </span>
- </a>
- <a href="#">
- <span>
- 5
- </span>
- </a>
- </div>
- <div id="wrap2">
- </div>
- </div>
- </div>
- <div class="other">
- </div>
- </body>
- </html>
- <script type="text/javascript">
- window.onload = function() {
- speed = -1;
- move = getId('banner');
- getId('wrap2').innerHTML = getId('wrap1').innerHTML;
- var time = setInterval(automove, 10);
- getId('main').onmouseover = function() {
- clearInterval(time);
- }
- getId('main').onmouseout = function() {
- time = setInterval(automove, 10);
- }
- getId('left').onclick = function() {
- speed = -1;
- }
- getId('right').onclick = function() {
- speed = 1;
- }
- }
- function getId(id) {
- return document.getElementById(id);
- }
- function automove() {
- if (parseInt(move.style.left) <= -getId('wrap1').offsetWidth) {
- move.style.left = 0 + 'px';
- }
- if (move.offsetLeft > 0) {
- move.style.left = -getId('wrap1').offsetWidth + 'px';
- }
- move.style.left = move.offsetLeft + speed + 'px';
- }
- </script>
以上所述就是本文针对 js 代码实现无缝滚动 (文字和图片),希望大家喜欢。
来源: http://www.phperz.com/article/17/0217/269833.html