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

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

<head>

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

<title>无标题文档</title>

<style>

    body,ul{margin:0;padding:0;}

    div{position:relative;width:680px;height:170px;border:1px solid black;margin:10px auto;overflow:hidden;}

    ul{position:absolute;left:0;top:0;}

    li{width:150px;height:150px;padding:10px;float:left;list-style:none;}

    img{width:150px;height:150px;}

</style>

<script>

window.onload = function(){

    var oDIV = document.getElementsByTagName('div')[0];

    var oUl = oDIV.getElementsByTagName('ul')[0];

    var arrLi = oUl.getElementsByTagName('li');

    var arrA = document.getElementsByTagName('a');

    var timer = null;

    var speed = 10;

    oUl.innerHTML += oUl.innerHTML;

    oUl.style.width = arrLi.length*arrLi[0].offsetWidth+'px';

    timer = setInterval(scrollPicture,100)

    arrA[0].onclick = function(){

        speed = -10;

    };

    arrA[1].onclick = function(){

        speed = 10;

    };

    for(var i=0;i<arrLi.length;i++){

        arrLi[i].onmouseover = function(){

            clearInterval(timer);

        }

        arrLi[i].onmouseout = function(){

            timer = setInterval(scrollPicture,100)

        }

    }

    /*原理：走到一半给拉回来*/

    function scrollPicture(){

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

            oUl.style.left = 0;

        }else if(oUl.offsetLeft >0){

            oUl.style.left = -oUl.offsetWidth/2+'px'; //向右走

        }

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

    }

};

</script>

</head>

<body>

    <a href="javascript:;"> < </a>

    <a href="javascript:;"> > </a>

    <div>

        <ul>

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

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

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

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

        </ul>

    </div>

</body>

</html>

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

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

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

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

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

  3. jquery 图片自动无缝滚动

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

  4. js原生实现 无缝滚动图片

    <!-- 无缝滚动图片开始 --> <div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; H ...

  5. css 图片的无缝滚动

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

  6. js动画之无缝滚动

    效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. js实现标准无缝滚动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS 在 HTML 无缝滚动

    marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...

  9. js文字的无缝滚动（上下）

    使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...

随机推荐

  1. Coupled model

    常见的coupled models phase English paper WRF-Chem mechanism public data 一些重要的结论 干空气的状态方程 ECWMF驱动WRF 常见的 ...

  2. libphp5.so可能遇到的问题(转摘)

    libphp5.so可能遇到的问题(转摘) 安装完APACHE和PHP5后,经常在启动APACHE载入libphp5.so时发现问题.我把遇到的问题统计下来: 1.undefined symbol:S ...

  3. stress命令安装

    一.stress(cpu) stress是一个linux下的压力测试工具,专门为那些想要测试自己的系统,完全高负荷和监督这些设备运行的用户. 下载地址http://people.seas.harvar ...

  4. python3之urllib代理池

    1.常见状态吗 301:重定向到新的URL,永久性302:重定向到临时URL,非永久性304:请求的资源未更新400:非法请求401:请求未经授权403:禁止访问404:没找到对应页面500:服务器内 ...

  5. 图文并解Word插入修改删除批注

    .插入批注 首先选择对象,比如部分文字[hd1] ,之后执行这样的操作:"插入"→"批注":插入的批注处于编辑状态,可以直接输入批注的文字即可;图解如下: .修 ...

  6. JAVA WEB期末项目第二阶段成果

    我们做的系统是一个基于Java web与MySQL的食堂订餐系统 班级: 计科二班 小组成员:李鉴宣.袁超 1.开发环境 开发编辑器使用:Visual Studio Code 数据库使用:MySQL8 ...

  7. 《软件自动化测试开发-Java和Python测试开发实用指南》出版了

    1.关于书中下载链接的问题:出现404,页面不存在 解答:大小写要区分,l和1不能弄错了 2.关于勘误,出现极个别漏子少字错字 解答:后续版本会改进,目前能理解就好了 ---------------- ...

  8. windowserver 2012安装openssh

    下载https://github.com/PowerShell/Win32-OpenSSH/releases解压放到C:\Program Files\OpenSSH-Win64 进入到C:\Progr ...

  9. Redis: userd_memory使用超出maxmemory

    Redis:userd_memory使用超出maxmemory 一.问题现象 2018.12.30 19:26分,收到Redis实例内存使用告警“内存使用率299%>=80%”,检查实例info ...

  10. 什么是AWVS

    什么是AWVS Acunetix Web Vulnerability Scanner(简称AWVS)是一款知名的网络漏洞扫描工具,它通过网络爬虫测试你的网站安全,检测流行安全漏洞,现已更新到10.(下 ...