无缝滚动Javascript：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <title></title>

         <style type="text/css">

         *{margin:0; padding: 0;}

         .div1{position: relative; height: 132px; width: 680px;border:1px solid black;margin:10px auto;overflow: hidden;}

         .div1 ul {position: absolute;}

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

         .div1 ul li img{width: 150px; height: 112px;}

         </style>

         <script type="text/javascript" src="move.js"></script>

         <script type="text/javascript">

         window.onload = function(){

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

             var oUl = getByClass(oDiv,"ul1")[0];

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

             var oA = document.getElementsByTagName("a");

             var iSpeed = 1;//设置速度

             var timer = null;//定时器

             oUl.innerHTML += oUl.innerHTML;//复制一份Ul,和原来的叠加在一起

             oUl.style.width = oLi.length * oLi[0].offsetWidth + "px";//设置Ul的宽度

             //alert(oLi.length * 170);

             timer = setInterval(fnMover,30);//页面加载完成就开始滚动

             oA[0].onclick = function(){//点击向左滚动，改变速度为负值

                 iSpeed = -1;

             }

             oA[1].onclick = function(){//点击向右滚动，改变速度为正值

                 iSpeed = 1;

             }

             oDiv.onmouseover = function(){//鼠标经过，停止滚动

                 clearInterval(timer);

             }

             oDiv.onmouseout = function(){//鼠标离开，继续滚动

                 timer = setInterval(fnMover,30);

             }

             //滚动的函数

             function fnMover(){

                 if(oUl.offsetLeft < -oUl.offsetWidth/2){//如果当前Left的值小于负的宽度的一半，那么，小Left的值为0

                     oUl.style.left =0;

                 }else if(oUl.offsetLeft > 0){//如果当前Left的值大于0；那么，让Left的值为负的宽度的一半

                     oUl.style.left = -oUl.offsetWidth/2 +"px";

                 }

                 oUl.style.left = oUl.offsetLeft +iSpeed + "px";//Left的值等于当前Left加速度

             }

         };

         function getByClass(obj,sClass){//用Class获取元素

             var aEle = document.getElementsByTagName("*");//获取所有的元素

             var i=0;

             var aResult = [];

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

                 if(sClass == aEle[i].className){//如果当前元素等于数组中的一个元素，那么取出来放在数组aResult中

                     aResult.push(aEle[i]);

                 }

             }

             return aResult;

         }

         </script>

     </head>

     <body>

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

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

         <div class="div1" id="div1">

             <ul class="ul1">

                 <li><img src="data:image/item1.jpg"></li>

                 <li><img src="data:image/item2.jpg"></li>

                 <li><img src="data:image/item3.jpg"></li>

                 <li><img src="data:image/item4.jpg"></li>

                 <li><img src="data:image/item5.jpg"></li>

                 <li><img src="data:image/item6.jpg"></li>

                 <li><img src="data:image/item7.jpg"></li>

             </ul>

         </div>

     </body>

 </html>

Javascript学习之无缝滚动的更多相关文章

  1. Javascript 学习笔记 无缝滚动

    效果 : 鼠标移入图片 停止滚动, 鼠标移出自动滚动 可以调整向左或右方向滚动 <style type="text/css"> * { margin:; padding ...

  2. 原生javascript效果：无缝滚动

    <style type="text/css"> #con {width:400px; padding:10px; margin:20px auto; text-alig ...

  3. Javascript实现图片无缝滚动

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

  4. javascript实现图片无缝滚动（scrollLeft的使用方法介绍）

    <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" conten ...

  5. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  6. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  7. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  8. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  9. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

随机推荐

  1. Linux下忘记MySQL的root密码的解决方法

    恢复方法之一 1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库. 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也 ...

  2. Asp.Net Core--自定义基于策略的授权

    翻译如下: 在封面下,角色授权和声明授权使用需求,需求的处理程序和预配置的策略. 这些构建块允许您在代码中表示授权评估,从而允许更丰富,可重用和容易测试的授权结构. 授权策略由一个或多个需求组成,并在 ...

  3. 详细解读Android中的搜索框—— SearchView

    以前总是自己写的 今天看看别人做的 本篇讲的是如何用searchView实现搜索框,其实原理和之前的没啥差别,也算是个复习吧. 一.Manifest.xml 这里我用一个activity进行信息的输入 ...

  4. am335x watchdog 设备出错

    问题描述: am335x watchdog 设备节点打开失败. 如果是直接将omap_wdt 直接编译成uImage,这样会出现打开文件节点失败的情况. 如果单独编译成模块在后面文件系统内插入则不会. ...

  5. redis cluster php 客户端 predis

    php有redis的扩展,目前来说,还不支持redis cluster,推荐一下predis,功能比较全,从单个,到主从,到cluster都是支持的.效率怎么样,要靠自己去测试一下. 1,下载pred ...

  6. CFileDialog(文件夹对话框类)和CFontDialog(字体设置对话框类)的使用学习

    CFileDialog(文件夹对话框类) 主要用于文件的保存,另存,打开,关闭等功能 功能“另存为”的实现: void CTXTDlg::OnFileSaveas() { LPCTSTR szFilt ...

  7. PHP文件可限速下载代码

    <?php include("DBDA.class.php"); $db = new DBDA(); $bs = $_SERVER["QUERY_STRING&qu ...

  8. Android平台下OpenCV移植与使用---基于C/C++

    在<Android Studio增加NDK代码编译支持--Mac环境>和<Mac平台下Opencv开发环境搭建>两篇文章中,介绍了如何使用NDK环境和Opencv环境搭建与测试 ...

  9. android init进程分析 ueventd

    转自:http://blog.csdn.net/freshui/article/details/2132299 (懒人最近想起我还有csdn好久没打理了,这个Android init躺在我的草稿箱中快 ...

  10. 几年前做家教写的C教程（之四专讲了指针与汉诺塔问题）

    C语言学习宝典(4) 指针:可以有效的表示复杂的数据结构,能动态的分配动态空间,方便的使用字符串,有效的使用数组,能直接处理内存单元 不掌握指针就没有掌握C语言的精华 地址:系统为每一个变量分配一个内 ...