页面图片无缝滚动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. zepto处理touch事件

    处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

  2. Unity的分辨率

    问题: 强制设置程序运行的分辨率 解决办法: 在程序开始运行时就对分辨率进行设定 设定方法如下: void GetResolution() { int width = Screen.currentRe ...

  3. （2）搜索广告CTR预估

    https://www.cnblogs.com/futurehau/p/6184585.html 1. CTR预估的流程 数据 -> 预处理 ->特征抽取 ->模型训练 ->后 ...

  4. Linux之ssh中XSHELL无法连接解决方案

    查漏补缺,理解概念,及时总结,互相交流,欢迎拍砖. 目前遇到的大致有以下几个问题分类: 网络是否连通.防火墙策略.DNS解析问题.端口是否开启.selinux是否开启-- 1.网络连通: 是否在同一网 ...

  5. 渗透实战（周六）：Hydra&Metasploit暴力破解SSH登录口令

    一. SSH服务开启前基础配置 1.1 修改配置文件

  6. Codeforces Round #411(Div. 2)——ABCDEF

    30min水掉前面4T,30min尝试读懂EF题,60min划水 顺便D忘记取膜丢50分,距比赛结束10s时hack失败丢50分... 从2620掉分到2520,从rank227掉到rank354.. ...

  7. Java 注解之总结

    注解是Spring和Mybatis框架所大量使用的技术,要想掌握框架相关技术,注解是必须要掌握的. 掌握注解的优势: 1.能够读懂别人写的代码,特别是框架相关的代码. 2.本来可能需要很多配置文件,需 ...

  8. hdu 4971 多校10最大权闭合图

    /* 很明显的最大权闭合图题 */ #include<stdio.h> #include<string.h> #include<queue> using names ...

  9. 学习笔记——TCP“三次握手”和“四次挥手”，简单介绍

    TCP/IP协议中,TCP协议提供可靠的连接服务,采用“三次握手”建立一个连接. (1)第一次握手:客户端发送SYN包(SYN=j)到服务器,并进入SYN_SEND状态,等待服务器确认. (2)第二次 ...

  10. [转]十五天精通WCF——第四天 你一定要明白的通信单元Message

    转眼你已经学了三天的wcf了,是不是很好奇wcf在传输层上面到底传递的是个什么鸟毛东西呢???应该有人知道是soap,那soap这叼毛长得是什么 样呢?这一篇我们来揭开答案... 一:soap到底长成 ...