实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换，那就需要js里的定时器来控制时间。

　　js中关于定时器的方法有两种：setTimeout和setInterval。它们接收的参数是一样的，第一个参数是函数，用于定时器的执行，第二个参数是数字，表示多少毫秒之后执行函数。它们的不同点在于setTimeout只执行一次指定的函数，而setInterval则每隔规定的时间就执行一次指定的函数。

　　在定时器后面我们还要知道清除定时器的方法：clearTimeout和clearInterval。它们都只接收一个参数，即定时器返回的值，用于消除指定的定时器。

　　知道定时器以后我们就要想办法让图片动起来，让图片元素按一定的速度移位就能实现。可以用js控制元素的样式，例如：

　　oUl.style.left = oUl.offsetLeft + speed + 'px';//其中speed的正负可以改变移动的方向。

　　代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ZuiYangDan</title>

     <style>

         * {

             margin: 0;

             padding: 0;

             list-style: none;

         }

         #container {

             width: 100%;

             border: 1px solid #aaa;

             margin: 100px 0px;

         }

         #pictures {

             width: 100%;

             height: 520px;

             overflow: hidden;

             position: relative;

         }

         #ul1 {

             position: absolute;

             left: 0;

             top: 0;

             overflow: hidden;

         }

         #ul1 li {

             float: left;

             width: 700px;

             height: auto;

         }

         #ul1 li img {

             width: 700px;

             height: auto;

         }

     </style>

     <script>

         window.onload = function() {

             var oDiv = document.getElementById("pictures");

             var oUl = document.getElementById("ul1");

             var speed = -3;

             var oLi = document.getElementsByTagName("li");

             oUl.innerHTML += oUl.innerHTML;//先把图片增加一组

             oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";

             function move() {

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

                     oUl.style.left = "0";

                 }

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

             }

             var timer = setInterval(move, 30);

             oDiv.onmouseover = function() {

                 clearInterval(timer);

             };

             oDiv.onmouseout = function() {

                 timer = setInterval(move, 30);

             };

         }

     </script>

 </head>

 <body>

     <div id="container">

         <div id="pictures">

             <ul id="ul1">

                 <li><img src="./image/P70225-210657.jpg" alt=""></li>

                 <li><img src="./image/P70225-210750.jpg" alt=""></li>

                 <li><img src="./image/P70225-210838.jpg" alt=""></li>

                 <li><img src="./image/P70225-210909.jpg" alt=""></li>

             </ul>

         </div>

     </div>

 </body>

 </html>

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

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

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

  2. js 实现图片无限横向滚动效果

    门户网站好多都有产品无线滚动展现的效果: 测试demo1 -- 非无缝滚动(可以看出来从头开始的效果): css样式如下: .box{ width: 1000px; border: 1px solid ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. js实现简单易用的上下无缝滚动效果

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果

    JS仿QQ空间鼠标停在长图片时候图片自动上下滚动效果 今天是2014年第一篇博客是关于类似于我们的qq空间长图片展示效果,因为一张很长的图片不可能全部把他展示出来,所以外层用了一个容器给他一个高度,超 ...

  6. jquery 图片自动无缝滚动

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

  7. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  8. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  9. js函数——倒计时模块+无缝滚动

    倒计时 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

随机推荐

  1. BOM之history对象(转)

    前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...

  2. iOS开发一些小技巧

    1.隐藏多余的tableView的cell分割线 self.tableView.tableFooterView= [[UIViewalloc]init]; 2.取消系统自带的返回字样 [[UIBarB ...

  3. Javascript前端面试题

    在网上看到了一些Javascript的面试题就整理了下来,后续看到再继续补充. 面试题按类型来分,主要涉及到"技术"与"非技术"两大类,技术类别下涉及到的子类别 ...

  4. Xamarin+Prism开发详解八：自动化测试之NUnit实践

    自动化测试很重要!很重要!以前多是手动测试,没有写过测试用例.这样的结果就是发现bug改了之后关联的其他功能又要从新测一遍.这样既浪费时间与成本,而且很无聊.之所以选择NUnit是公司需要,现在.ne ...

  5. BZOJ 2142: 礼物

    模非素数下的排列组合，简直凶残 调着调着就过了= = 都不知道怎么过的= = 直接上链接http://hi.baidu.com/aekdycoin/blog/item/147620832b567eb4 ...

  6. 读书笔记 effctive c++ Item 20 优先使用按const-引用传递（by-reference-to-const）而不是按值传递(by value)

    1. 按值传递参数会有效率问题 默认情况下,C++向函数传入或者从函数传出对象都是按值传递(pass by value)(从C继承过来的典型特性).除非你指定其他方式,函数参数会用实际参数值的拷贝进行 ...

  7. 项目中通过Sorlj获取索引库中的数据

    在开发项目中通过使用Solr所提供的Solrj(java客户端)获取索引库中的数据,这才是真正对项目起实质性作用的功能,提升平台的检索性能及检索结果的精确性 第一步,引入相关依赖的jar包 第二步,根 ...

  8. 使用JS实现手风琴效果

    想要实现简单的手风琴切换效果,需要使用JS实现,如下是使用javascript源码实现,后续会更新使用jQuery实现. 1. 先进行简单的布局:我们可以再ul下添加几个li实现html的简单布局,再 ...

  9. 每天一个Linux命令（02）--cd命令

    Linux cd 命令可以说是Linux中最基本的命令语句,其他的命令语句都要进行操作,都是建立在使用 cd命令基础上的. 所以,学习Linux常用命令,首先就要学好 cd 命令的使用技巧. 1.命令 ...

  10. 电器ERP行业案例——环力科技

    环力科技ERP案例 企业简介 [规模] 环力公司始建于1992年,是一家专业生产电子压力控制器.水泵压力控制器.气泵压力控制器.电泵浮球控制器.全自动水泵及其它配套产品研究.开发.生产.销售为一体的专 ...