页面图片无缝滚动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. rrdtool 实践

    rrdtool 实践 rrdtool 参数比较多,如果直接看文档,不知从何入手,直接从例子入手这样容易理解,模拟网卡流量 1. 创建数据库 rrdtool create Flow.rrd --star ...

  2. Python虚拟环境和requirements.txt文件的使用

    参考: https://www.centos.bz/2018/05/centos-7-4-%E5%AE%89%E8%A3%85python3%E5%8F%8A%E8%99%9A%E6%8B%9F%E7 ...

  3. Vue项目在IE浏览器报错polyfill-eventsource added missing EventSource to window

    已经安装了babel-polyfill,依然报错.

  4. c++ list双向链表管理对象

    #cat list.cc #include <cstdlib> #include <iostream> #include <stdio.h> using names ...

  5. 解读PTR_ERR,ERR_PTR,IS_ERR

    解读PTR_ERR,ERR_PTR,IS_ERR 看到了几个宏PTR_ERR,ERR_PTR,IS_ERR(其实是内联函数).还是不太明白,然后就google搜索了一下,搜出来的结果真是不让人满意,看 ...

  6. linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号

    linux 的sed命令解释 sed ':t;N;s/\n/,/;b t' 将换行符换成逗号 实现的功能是吧换行符换成逗号了,自己试验过. 求解释,:t N b t 都是什么意思??? :t 定义la ...

  7. 我的FPGA

    转眼间我都工作三个年头了,这两年多时间我一直从事着FPGA测试工作,从一开始的懵懂无知,到现在的些许理解,我想记录和分享我对FPGA测试的理解. 之所以选择在博客园写这样,是我发现在这里阅览文章不需要 ...

  8. POJ-1655 Balancing Act（树的重心）

    Consider a tree T with N (1 <= N <= 20,000) nodes numbered 1...N. Deleting any node from the t ...

  9. Heaters (codeforces 1066B)

    贪心题 策略 在最左边设置一个array 0,每一次从右往左,如果有heater的话就寻找heater左边界是不是小于等于目前的上一个heater的右边界,如果没有一个这样的,那么就直接输出-1 代码 ...

  10. case....when ...多重判断

    CASE...WHEN 进行多重判断 CASE WHEN A  IS NOT NULL THEN B WHEN C IS NULL THEN CASE WHEN D IS NOT NULL THEN ...