<!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. SpringMVC中Interceptor和Filter区别

    Interceptor 主要作用:拦截用户请求,进行处理,比如判断用户登录情况,权限验证,主要针对Action请求进行处理.是通过HandlerInterceptor 实现的. 配置如下: <m ...

  2. 基于hibernate的BaseDao及其实现类的设计

    以前做设计的时候dao接口和它的实现了,这样子就不必写这么多的重复代码了.但由于对反射没有了解,除非依赖hibernate的其他组件,否则写不出来.不过,有了反射,我们可以通过泛型来实现我们想要做的功 ...

  3. RESTFUL Level&HATEOAS

    1.什么是RESTful? REST这个词,是Roy Thomas Fielding在他2000年的博士论文中提出的.翻译过来就是"表现层状态转化." Roy Thomas Fie ...

  4. Dangling meta character '' near index 0

    1.replaceAll()方法报错 对字符串使用replaceAll()方法替换 * ? + / | 等字符的时候会报以下异常 Dangling meta character '*' near in ...

  5. 机器学习算法的基本知识（使用Python和R代码）

    本篇文章是原文的译文,然后自己对其中做了一些修改和添加内容(随机森林和降维算法).文章简洁地介绍了机器学习的主要算法和一些伪代码,对于初学者有很大帮助,是一篇不错的总结文章,后期可以通过文中提到的算法 ...

  6. curator配置及使用

    1.action.yml --- actions: 1: action: index_settings options: index_settings: index: routing.allocati ...

  7. Hexo next主题安装algolia

    一直在使用hexo写自己的博客,最近博客刚刚搬家重新搞了下博客: 1.为hexo添加站内搜索 我用的是algolia,在next主题5.x以上的版本集成了algolia站内搜索功能,我们只需要简单的配 ...

  8. 创建SpringMVC项目过程

    1.导入对应jar包 <properties> <spring.version>5.0.2.RELEASE</spring.version> </proper ...

  9. alibaba开发手册

    alibaba开发手册 11.19 强制: 方法参数在定义和传入时,多个参数逗号后边必须加空格. ​ IDE 的 text file encoding 设置为 UTF-8; IDE 中文件的换行符使用 ...

  10. 使用Properties配置文件进行配置读取

    #使用Properties配置文件进行配置读取: 例如:有一个配置文件的内容如下: # setting.properties last_open_file=/data/hello.txt auto_s ...