页面图片无缝滚动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. C# invoke和begininvoke的用法

    namespace invoke和begininvoke的用法 { public partial class Form1 : Form { public Form1() { InitializeCom ...

  2. centos添加永久的环境变量

    cd /etc/profile.d/ 创建一个sh文件 vi dotnetpath.sh 内容如下: export PATH=$PATH:/opt/dotnet 保存,重启,这就有了一个永久的环境变量

  3. PHP连接mysql8.0出错“SQLSTATE[HY000] [2054] The server requested authentication method unkno…

    今天安装安装一个叫得推校园O2O系统的使劲都说连接不上服务器. 下面是安装说明,我直接进行3步骤,导入数据库配置文件,结果就显示题目报错的内容 安装说明: 直接输入程序目录即可 http://loca ...

  4. cv的期刊和会议

    http://blog.csdn.net/tmylzq187/article/details/51111421

  5. 00.用 yield 实现 Python 协程

    来源:Python与数据分析 链接: https://mp.weixin.qq.com/s/GrU6C-x4K0WBNPYNJBCrMw 什么是协程 引用官方的说法: 协程是一种用户态的轻量级线程,协 ...

  6. django访问静态变量的设置

    在项目的urls.py文件中 默认urlpatterns是空的列表需要填入url匹配的路由,默认使用static from django.conf.urls import include, url f ...

  7. hdu 5182 PM2.5

    问题描述 目前,我们用PM2.5的含量来描述空气质量的好坏.一个城市的PM2.5含量越低,它的空气质量就越好.所以我们经常按照PM2.5的含量从小到大对城市排序.一些时候某个城市的排名可能上升,但是他 ...

  8. 创建序列化器，序列化管理器，closureSerializer

    创建序列化器,序列化管理器,closureSerializer //通过反射创建序列化对象 // Create an instance of the class with the given name ...

  9. java debug jdk(转载）

    Debug info unavailable 解决之道 从事Java的小伙伴们估计都有断点代码的习惯,可以很方便的查看运行期代码中一些变量的值. 但是JDK中有些类你会发现是无法断点的,即使你在IDE ...

  10. zookeeper协调技术

    本文转自http://www.cnblogs.com/wuxl360/p/5817471.html 感谢作者 一.分布式协调技术 在给大家介绍ZooKeeper之前先来给大家介绍一种技术——分布式协调 ...