<!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. CSS预处理技术

    CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...

  2. Qt 非阻塞延时

    void delay(int mSec)//ms { QEventLoop loop; QTimer::singleShot(mSec, &loop, SLOT(quit())); loop. ...

  3. 测试误区《二》 python逻辑运算和关系运算优先级

    关系运算 关系运算就是对2个对象进行比较,通过比较符判断进行比较,有6种方式. x > y 大于 x >= y 大于等于 x < y 小于 x <= y 小于等于 x = y ...

  4. js类型比较

    比较数据类型做比较的三种方法typeofinstanceofObject.prototype.toString.call() javascript七大类型 javascript的数据类型分为两类:原始 ...

  5. nginx代理php项目的websocket

    在http段添加 http { ... map $http_upgrade $connection_upgrade { default upgrade; '' close; } ... } 在serv ...

  6. Jmeter之正则表达式提取

    一.正则表达式提取器: 1.比如需要提取如下响应文本中的 “<title> 孤舟点点 - 博客园找找看</title>” 里面的 “孤舟点点 - 博客园找找看”: 2.设置正则 ...

  7. python 堡垒机讲解及实例

    paramiko模块,该模块基于SSH用于连接远程服务器并执行相关操作. SSHClient:用于连接远程服务器并执行基本命令 #coding:utf-8 import paramiko ssh=pa ...

  8. 1078 Hashing （25 分)

    1078 Hashing (25 分) The task of this problem is simple: insert a sequence of distinct positive integ ...

  9. 你每天跑这么多自动化用例，能发现BUG吗？

    阿里QA导读:为什么要度量测试有效性?这么多的CASE,花了大量时间和资源去运行,真能发现bug吗?CI做到90%的行覆盖率了,能发现问题吗?测试用例越来越多,删一些,会不会就发现不了问题了?怎么找出 ...

  10. 代工黑马，纬创如何强吞iPhone?

    ​ 现在,智能手机市场非常得意兴阑珊,以苹果为首的最强大脑似乎再也想不出什么好的创意,iPhone7也只不过是旧机种的翻新款式,看上去跟一块板砖.一块镜子差不多:软体方面则出现了大批的"过度 ...