<!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title></title>

     <style type="text/css">

         *

         {

             margin: 0;

             padding: 0;

         }

         #div1

         {

             width: 600px;

             height: 419px;

             position: relative;

             background-color: red;

             margin: 100px auto;

             overflow: hidden;

         }

             #div1 ul

             {

                 position: absolute;

                 left: 0;

                 top: 0;

                 margin: auto;

             }

                 #div1 ul li

                 {

                     float: left;

                     width: 630px;

                     height: 420px;

                     list-style: none;

                 }

     </style>

     <script type="text/javascript">

         window.onload = function () {

             var oDiv1 = document.getElementById("div1");

             var oUl = oDiv1.getElementsByTagName("ul")[0];

             var aLi = oUl.getElementsByTagName("li");

             var speed = 2;//速度方向

             oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;

             oUl.style.width = aLi[0].offsetWidth * aLi.length + 100 + "px";

             function move() {

                 //左走

                 if (oUl.offsetLeft < -oUl.offsetWidth / 2) {

                     oUl.style.left = '0';

                 }

                 //右走

                 if (oUl.offsetLeft > 0) {

                     oUl.style.left = -oUl.offsetWidth / 2 + "px";

                 }

                 oUl.style.left = oUl.offsetLeft + speed + "px";

             }

             var timeer = setInterval(move, 30);

             oDiv1.onmouseover = function () {

                 //清除定时器

                 clearInterval(timeer);

             }

             oDiv1.onmouseout = function () {

                 //打开定时器

                 timeer = setInterval(move, 30);

             }

             //控制左右的按钮

             var aA = document.getElementsByTagName("a");

             aA[0].onclick = function () {

                 //左侧滚动

                 speed =-2;

             }

             aA[1].onclick = function () {

                 //右侧滚动

                 speed =2;

             }

         }

     </script>

 </head>

 <body>

     <center>

     <a href="javascript:void(0);">向左走</a>

         &nbsp;

     <a href="javascript:void(0);">向右走</a>

         </center>

     <div id="div1">

         <ul>

             <li>

                 <img src="data:images/00_00.jpg" /></li>

             <li>

                 <img src="data:images/00_01.jpg" /></li>

             <!--li>

                 <img src="data:images/00_02.jpg" /></!--li>

             <li>

                 <img src="data:images/00_03.jpg" /></li-->

         </ul>

     </div>

 </body>

 </html>

说明：我的图片尺寸大小是630X419：

Javascript实现 图片的无缝滚动的更多相关文章

  1. jquery 图片自动无缝滚动

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  2. js 实现图片的无缝滚动

      js 实现图片的无缝滚动 CreateTime--2018年3月7日17:18:34 Author:Marydon 测试成功 <!DOCTYPE html> <html> ...

  3. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  4. ASP.NET中使用JavaScript实现图片自动水平滚动效果

    参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...

  5. css 图片的无缝滚动

    转载:http://blog.sina.com.cn/s/blog_6387e82401013kx8.html js的图片的横向或者竖向的无缝滚动图片. ttp://zx.bjmylike.com/ ...

  6. SuperSlidev2.1 轮播图片和无缝滚动

    使用方法,狠狠的点击下面链接 http://down.admin5.com/demo/code_pop/18/562/index.html 简单使用方法如下 html <div class=&q ...

  7. js 图片实现无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. JavaScript（六）——实现图片上下或者左右无缝滚动

    /*! jQuery v1.8.3 jquery.com | jquery.org/license */ (function(e,t){function _(e){var t=M[e]={};retu ...

  9. js图片无缝滚动代码

    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一 ...

随机推荐

  1. c++编程规范的纲要和记录

    这是一本好书, 可以让你认清自己对C++的掌握程度.看完之后,给自己打分,我对C++了解多少? 答案是不足20分.对于我自己是理所当然的问题, 就不提了, 记一些有启发的条目和细节: (*号表示不能完 ...

  2. sed实例一则

    1.背景: test.txt文件里有这些语句 li^E1026^D20150802B07QH800^B698.^C20150801B08CDP00^B514.^C20150803D00A8L00^B2 ...

  3. Effective Objective-C 2.0之Note.03(属性详解)

    用Objective-C等面向对象语言编程时,“对象”(object)就是“基本构造单元”(building block),开发者可以通过对象来存储并传递数据.在对象之间传递数据并执行任务的过程就叫做 ...

  4. OC中NSDictionary（字典）、NSMutableDictionary（可变字典）、NSSet（集合）、NSMutableSet（可变集合）得常用方法

    字典用于保存具有映射关系数据的集合 一个key—value对认为是一个条目(entry),字典是存储key—value对的容器 与数组不同,字典靠key存取元素 key不能重复,value必须是对象 ...

  5. iOS App Launch Option

    iOS 程序启动时总会调用application:didFinishLaunchingWithOptions:,其中第二个参数launchOptions为NSDictionary类型的对象,里面存储有 ...

  6. [转]基于AngularJS的前端架构（上）

    模块化 怎么分模块 AngularJS自己有模块的概念,但只是为controller.direcitive.service等提供一个集合的概念,并没有文件调度的功能. 官方推荐的模块分类方法是: an ...

  7. vs2010运行C程序时，运行结果窗口一闪而过

    摘要:vs2010运行C程序时,运行结果窗口一闪而过; ------------------------------------------------------------ Ctrl F5测试运行 ...

  8. JAVA事务

    一.什么是事务 我们通常会认为事务与数据库有关. 事务是访问数据库的一个操作序列,数据库应用系统通过事务集来完成对数据库的操作.事务的正确执行使得数据库从一种状态转换成另外一种状态. 事务必须服从IS ...

  9. android开发 自定义图文混排控件

    功能:图文混排,可自动缩放字体,如图: 单点触控使用的代码来自:http://blog.csdn.net/xiaanming/article/details/42833893  谢谢博主! 在该dem ...

  10. 手把手教你自动生成Makefile

    概述:autoconf/automake工具用于自动创建功能完善的Makefile文件,接下来简单介绍一下,如何使用上述工具 自动生成Makefile 前提:安装autoconf工具(ubuntu:s ...