页面图片无缝滚动JavaScript原理：移动的区块包含图片内容，区块相对父级元素进行定位脱离文档流。再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动。由于每次间隔移动的时间设置很短，会“欺骗”人的眼睛，形成无缝滚动效果。

　　脱离文档流：父元素为相对定位position:relative，区块为绝对定位;position:absolute。

　　每隔固定时间进行left的变化：使用函数setInterval();

　　设置HTML文档以及样式：

　　滚动区域宽度=图片宽度x图片数目

　　178x4=712

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<style>

*{

    margin:0;

    padding:0;

    }

#div1{

    width:712px;

    height:108px;

    margin:100px auto;

    overflow:hidden;

    position:relative;

    background:red;

    }

#div1 ul{

    position:absolute;

        width:inherit;

    left:0;

    top:0;

    }

#div1 ul li{

    float:left;

    width:178px;

    height:108px;

    list-style:none;

    }

img{

    width:inherit;

    height:;

    }

</style>

<script>

</script>

</head>

<body>

<div id="div1">

    <ul>

        <li><img src="./实验_files/狼.jpg"></li>

        <li><img src="./实验_files/兔子.jpg"></li>

        <li><img src="./实验_files/熊猫.jpg"></li>

        <li><img src="./实验_files/狐狸.jpg"></li>

    </ul>

</div>

</body>

</html>

　　基础的JavaScript代码：

window.onload=function()

{

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

    var oUl=oDiv1.getElementsByTagName("ul")[0];

    var aLi=oDiv1.getElementsByTagName("li");

    //oUl的left值为当前获取的left值减去2px

    function move()

    {

        oUl.style.left=oUl.offsetLeft-2+'px';

    }

    setInterval(move(),100);

};

　　【问题：在JavaScript中，函数是否带括号有什么区别?】

　　在向左移动后露出oDiv，图片截断，没有连续性。解决方案：oUl内的li元素在原有基础上增加1倍，并且根据新的li的宽度重新设计oUl的宽度值。在oUl的left值减少至一个oDiv1宽度值时(刚好四个图片偏移完毕)，令其left值归零，重新开始oUl的left值偏移。

　　增加后的JavaScript代码：

window.onload=function()

{

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

    var oUl=oDiv1.getElementsByTagName("ul")[0];

    var aLi=oDiv1.getElementsByTagName("li");

    //li的数目翻倍

    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

    //oUl的宽度重新计算

    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

    /*判断若oUl已经偏移一次完毕（未增加li以前的宽度），那么令oUl的left值归零，否则left值就在当前的基础上加2px*/

    function move()

    {

        if(-oUl.offsetLeft>=oUl.offsetWidth/2)

        {

            oUl.style.left=0;

        }

        else

        {

            oUl.style.left=oUl.offsetLeft-2+'px';

        }

    }

    setInterval(move,100);

};

　　(1)此例中的offsetLeft为负值，比较需要注意正负号。oUl.offsetLeft>=712的写法就是没有考虑其值为负，虽然没有语法上的错误，但是逻辑上if的条件判断就是失效了;

　　向左移动的无缝滚动已经完毕。倘若需要向右滚动呢?

    function move()

    {

        if(oUl.offsetLeft>0)

        {

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

        }

           oUl.style.left=oUl.offsetLeft+2+'px';

    }

    setInterval(move,100);

　

　(2)oUl的oUl.style.left=-oUl.offsetWidth/2+'px'中忘了写'px'导致代码无法正常运行，但是控制台不报错。

　　(3)明明HTML的排序布局，ul都是以左边对齐div元素的左边，为什么在向右滚动时，开始会变成以右边对齐div元素的右边?到底是什么改变了布局?

　　鼠标移入图片，滚动立即停止，鼠标移出图片，滚动继续。JavaScript代码：

function move()

    {

        if(-oUl.offsetLeft>oUl.offsetWidth/2)

        {

            oUl.style.left='0';

        }

        oUl.style.left=oUl.offsetLeft-2+"px";

    }

    var timer=setInterval(move,100);

    oDiv1.onmouseover=function()

    {

        clearInterval(timer);

    }

    oDiv1.onmouseout=function()

    {

        timer=setInterval(move,100);

    }

　　(4)js的变量赋值为函数时，变量定义的函数是否立即被执行，譬如：var timer=setInterval(move,100);？

　　

　　实现点击按钮，控制图片的左右滚动方向

　　添加按钮HTML代码：

<input id='btn1' type='button' value='向左滚动'/>

<input id='btn2' type='button' value='向右滚动'/>

　

     JavaScript代码：
window.onload=function()

{

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

    var oUl=oDiv1.getElementsByTagName("ul")[0];

    var aLi=oDiv1.getElementsByTagName("li");

    var oBtn1=document.getElementById("btn1");

    var oBtn2=document.getElementById("btn2");

    var speed=2;

    //li的数目翻倍

    oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;

    //oUl的宽度重新计算

    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';

    function move()

    {

        if(-oUl.offsetLeft>oUl.offsetWidth/2)

        {

            oUl.style.left='0';

        }

           if(oUl.offsetLeft>0)

        {

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

        }

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

    }

    var timer=setInterval(move,100);

    oBtn1.onclick=function()

    {

         speed=-2;

    }

        oBtn2.onclick=function()

    {

          speed=2;

    }

    oDiv1.onmouseover=function()

    {

        clearInterval(timer);

    }

    oDiv1.onmouseout=function()

    {

        timer=setInterval(move,100);

    }    
}

　(5)函数move()的重新合成构造在编写代码时不太清晰。为speed赋值时，错误的添加了var关键字 oBtn2.onclick=function()

　　{

　　var speed=2;

　　}

　　这种写法与

　　oBtn2.onclick=function()

　　{

　　speed=2;

　　}

　　的区别在哪里?

 

应用JavaScript搭建一个简易页面图片无缝滚动效果的更多相关文章

  1. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  2. Angularjs,WebAPI 搭建一个简易权限管理系统

    Angularjs,WebAPI 搭建一个简易权限管理系统 Angularjs名词与概念(一)   1. 目录 前言 Angularjs名词与概念 权限系统原型 权限系统业务 数据库设计和实现 Web ...

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

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

  4. express + mongodb 搭建一个简易网站 （四）

    express + mongodb 搭建一个简易网站 (四) 目前网站整体页面都已经能全部展示了,但是,整个网站还有两个块需要做完才能算完整,一个连接数据库,目前网站上的数据都是抓取的本地假数据,所以 ...

  5. express + mongodb 搭建一个简易网站 （三）

    express + mongodb 搭建一个简易网站 (三) 前面已经实现了基本的网站功能,现在我们就开始开搞一个完整的网站,现在整个网站的UI就是下面的这个样子. 我们网站的样子就照着这个来吧. 1 ...

  6. express + mongodb 搭建一个简易网站(二)

    express + mongodb 搭建一个简易网站 (二) 在搭建网站(一)中,实现了简单的路由功能,这离一个完整的网站还差的有点远,继续撸代码吧. 1.首先在根目录下新建一个views文件夹,用来 ...

  7. 使用EF Code First搭建一个简易ASP.NET MVC网站,允许数据库迁移

    本篇使用EF Code First搭建一个简易ASP.NET MVC 4网站,并允许数据库迁移. 创建一个ASP.NET MVC 4 网站. 在Models文件夹内创建Person类. public ...

  8. express + mongodb 搭建一个简易网站(一)

    express + mongodb 搭建一个简易网站(一) 前言:后台使用node.js的express框架,数据库使用mongodb,模板使用ejs.大概就这些. 开始第一个简易网站之旅吧.... ...

  9. 前端 JavaScript 实现一个简易计算器

    前端使用 JavaScript 实现一个简易计算器,没有难度,但是里面有些小知识还是需要注意的,算是一次基础知识回顾吧. 题目 实现一个简易版的计算器,需求如下: 1.除法操作时,如果被除数为0,则结 ...

随机推荐

  1. （转） 分布式文件存储FastDFS（七）FastDFS配置文件详解

    http://blog.csdn.net/xingjiarong/article/details/50752586 配置FastDFS时,修改配置文件是很重要的一个步骤,理解配置文件中每一项的意义更加 ...

  2. C# 时间对比

    public bool IfTime(string StartTime, string EndTime) { DateTime dt1 = Convert.ToDateTime(StartTime); ...

  3. .net core发布程序

    这里说的是,和.net core运行库一起发布,所以,目标运行系统,可以不安装.net core也能运行 1.project.json 把dependencies里面的type删除掉,后面加入&quo ...

  4. lua_note_01_lua介绍

    1. lua 1. lua 1.1. lua介绍 1.2. Lua 特性 1.3. 特点 1.4. Lua 应用场景 1.5. 环境搭建 1.6. VS lua 1.1. lua介绍 Lua 是一种轻 ...

  5. Emacs的undo与redo

    在Emacs的手册16.1节中有这样一句话, Any command other than an undo command breaks the sequence of undo commands. ...

  6. SqlServer转换为Mysql（mss2sql）

    SqlServer转换为Mysql(mss2sql)工具 http://pan.baidu.com/s/1c2d8R8O 参考链接: http://www.cnblogs.com/angestudy/ ...

  7. nginx的安装部署以及使用

    [介绍] nginx是现在互联上非常流行的高性能的 Web 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. 现在很多互联网应用都使用nginx来作为负载均衡的使用,再高并发 ...

  8. linux学习4-crontab定时任务

    crontab -e  在当前用户下创建定时任务 我们通过这样一张图来了解 crontab 的文档编辑的格式与参数 在了解命令格式之后,我们通过这样的一个例子来完成一个任务的添加,在文档的最后一排加上 ...

  9. random随机库

    random库是用于产生并运用随机数的标准库 主要包含的有9个随机函数,分别是: seed(), random(), randint(), getrandbits(), randrange(), un ...

  10. Girls Love 233

    Girls Love 233 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) P ...