页面图片无缝滚动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. HDU_1063_Exponentiation_大数

    Exponentiation Time Limit: 2000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  2. SQL几种常用的函数

    函数的种类: 算数函数(数值计算的函数) 字符串函数(字符串操作的函数) 日期函数(用来进行日期操作的函数) 转换函数(用来转换数据类型和值的函数) 聚合函数(用来进行数据聚合的函数) 算数函数(+- ...

  3. CAD绘制一个线型标注（com接口VB语言）

    主要用到函数说明: _DMxDrawX::DrawDimRotated 绘制一个线型标注.详细说明如下: 参数 说明 DOUBLE dExtLine1PointX 输入第一条界线的起始点X值 DOUB ...

  4. CAD插入jpg

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...

  5. STL源码分析之内存池

    前言 上一节只分析了第二级配置器是由多个链表来存放相同内存大小, 当没有空间的时候就向内存池索取就行了, 却没有具体分析内存池是怎么保存空间的, 是不是内存池真的有用不完的内存, 本节我们就具体来分析 ...

  6. LOJ——#6277. 数列分块入门 1

    ~~推荐播客~~ 「分块」数列分块入门1 – 9 by hzwer 浅谈基础根号算法——分块 博主蒟蒻,有缘人可直接观摩以上大佬的博客... #6277. 数列分块入门 1 题目大意: 给出一个长为 ...

  7. [CodeForces] 274E Mirror Room

    题意翻译 有一个n*m的格子图,其中有一些是黑色的,另一些为白色. 从某个白色格子的中心点向左上(NW),左下(SW),右上(NE),右下(SE)四个方向中的一个发出一束光线,若光线碰到黑色格子或者墙 ...

  8. 匈牙利算法求最大匹配（HDU-4185 Oil Skimming）

    如下图:要求最多可以凑成多少对对象 大佬博客: https://blog.csdn.net/cillyb/article/details/55511666 https://blog.csdn.net/ ...

  9. 瑞芯微ROCK960 RK3399固件烧录总结

    1 下载固件 进入瑞芯微ROCK960下载主页 https://www.96boards.org/documentation/consumer/rock/downloads/ 选择os固件, Debi ...

  10. [备忘]git常用命令

    网站有点儿久没有维护(因为去做其他事情了呗),现在空下来,回来改了网站的一些东西,却忘记了git的一些常用的命令,于是便写下这篇文,方便查阅,免得每次都去看手册(毕竟我懒啊!!) 检查当前文件状态:g ...