<!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. JSAPI_Ticket签名

    1.微信 JS 接口签名校验工具 2.具体开发 2.1 获取access_token,然后jsapi_ticket /** * 获取access_token,然后jsapi_ticket */ pri ...

  2. VPN错误800、错误789

    VPN突然无法连接解决方法: 1. 单击“开始”,单击“运行”,键入“regedit”,然后单击“确定” 2. 找到下面的注册表子项,然后单击它:HKEY_LOCAL_MACHINE\System\C ...

  3. 从零开始学ios开发(四):IOS控件(1),Image View、Text Field、Keyboard

    长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios.我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View.Text Field.Keyboard.Slider等 ...

  4. Centos 安装 p7zip,即Linux下的7z

    Centos 无法直接通过yum安装7z,我们一般通过repoforge,rpmforge的软件包进行安装,你只需要下载一个对应的包,直接安装就可以 p7zip-9.20.1-1.el4.rf.i38 ...

  5. java程序用做windows服务

    具体步骤在这里 http://www.doc88.com/p-360144091164.html 遇到错误: JVM did not exit on request, terminated 通过下面的 ...

  6. with check option

    通过有with check option选项的视图操作基表(只是面对单表,对连接多表的视图正在寻找答案),有以下结论:首先视图只操作它可以查询出来的数据,对于它查询不出的数据,即使基表有,也不可以通过 ...

  7. FPGA控制HC595

    /*****************************************************************************Copyright: 2013File na ...

  8. svn版本控制器在vs2013中的使用

      下面记录常用的几种用法:   a) SVN检出 将SVN服务端所保存的数据下载到个人工作平台. 组长上传初始项目后,各组员可以到服务器上检出项目 1. 打开Visual Studio 2010-& ...

  9. 软件工程课后作业——四则运算Ⅲ(C++)

    一.设计思路 题目:可以答题并判断对错,最后显示做对几道题. 在原有的基础上,又拓展了答题模块. 在结构体中添加了answer属性,把输入的答案与正确答案比较,若相等则计数加一. 二.源代码 (1)四 ...

  10. 小组开发项目针对性的NABC分析

    单独就我们团队开发项目——重力解锁的功能特点而言,我们解决了智能手机屏幕解锁的乏味和繁琐的特点,显得更有趣味性和独特性,更符合现代人追随时尚的潮流:我们根据个人的不同喜好和便利性来设定一些动作,利用重 ...