Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要教大家如何简单实现 js 无缝滚动效果,js 轮播图实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- <style>
- *{ margin: 0; padding: 0; } ul{ list-style: none; } img{ vertical-align:
- top; /*消除3px的距离*/ } .box{ width: 600px; height: 200px; margin: 100px auto;
- overflow: hidden; position: relative; border: 1px solid red; } ul{ width:
- 400%; position: absolute; left: 0; top: 0; } ul li{ float: left; }
- </style>
- <script>
- window.onload = function() {
- function $(id) {
- return document.getElementById(id);
- }
- var timer = null;
- var num = 0;
- timer = setInterval(autoPlay, 20);
- function autoPlay() {
- num--;
- if (num <= -1200) {
- num = 0;
- }
- $("picBox").style.left = num + "px";
- }
- $("picBox").onmouseover = function() {
- clearInterval(timer);
- }
- $("picBox").onmouseout = function() {
- timer = setInterval(autoPlay, 20);
- }
- }
- </script>
- </head>
- <body>
- <div class="box" id="scroll">
- <ul id="picBox">
- <li>
- <img src="images/01.jpg" alt="">
- </li>
- <li>
- <img src="images/02.jpg" alt="">
- </li>
- <li>
- <img src="images/03.jpg" alt="">
- </li>
- <li>
- <img src="images/04.jpg" alt="">
- </li>
- <li>
- <img src="images/01.jpg" alt="">
- </li>
- <li>
- <img src="images/02.jpg" alt="">
- </li>
- </ul>
- </div>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0618/328019.html