<!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. 数据库引擎MyiSAM和InnoDB区别

    数据库操作原理归根到底还是对文件操作,只不过是数据库文件. MySQL数据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三 ...

  2. [LC] 380. Insert Delete GetRandom O(1)

    Design a data structure that supports all following operations in average O(1) time. insert(val): In ...

  3. SHELL用法六（Find语句）

    1.SHELL编程Find语句案例实战 1)SHELL编程四剑客工具:Find.Grep.Sed.Awk,通过四剑客可以完成常规Linux指令无法完成或者比较复杂的功能,学好SHELL编程四剑客有助于 ...

  4. practically|exclamation|defy|thrilled|

    ADV 简直:几乎Practically means almost, but not completely or exactly. He'd known the old man practically ...

  5. _Random和_RandomString的使用区别

    __Random 函数介绍 作用:生成随机数 使用格式:${__Random(5,30,myResult_Random)},其中 第一个参数5,表示希望生成的数字最小的值,必填 第二个参数30,表示希 ...

  6. 使用GitBook编写项目文档

    GitBook简介 GitBook 是使用 GitHub / Git 和 Markdown(或AsciiDoc)构建漂亮书籍的命令行工具(和Node.js库): GitBook 可以将您的内容作为网站 ...

  7. SpringMVC学习笔记八:文件上传及多个文件上传

    SpringMVC实现文件上传需要加入jar包,commons-fileupload-1.3.1.jar,commons-io-2.2.jar 项目目录树: pom.xml加入需要的包 <pro ...

  8. CPU|MICGPU|FPGA|超算|Meta-data|

    生物医学大数据: 收集数据后对数据的分析,如同看相,而对数据信息的挖掘可以看作是算命.这两个过程是基于算法和软件这类工具之上的. 在存储方面:在硬件上,为了Parallel computing的目的, ...

  9. JS的时间差换算（String to 自己想要的时间格式）

    JS的时间差换算(String to 标准的时间格式) 1.字符串到标准时间格式: 字符串: var time1="2018-05-11 00:00:00" var time2=& ...

  10. 4.2英寸的iPhone SE2就要来了！但你还会买单吗？

    SE2就要来了!但你还会买单吗?" title="4.2英寸的iPhone SE2就要来了!但你还会买单吗?"> 与其他手机厂商不同,苹果在手机市场的产品策略很&q ...