上一篇写的关于放大镜的，可能在实际开发中用的不是很多，接下来将的图片无缝滚动在实际工作中就是用的比较多的了。

如上图，通过定时器控制图片无缝滚动，当鼠标悬浮时停止滚动，鼠标离开，滚动继续。

主要原理是通过定位实现图片的移动，然后通过定时器实现滚动的效果，即无缝滚动。

首先是基础的结构

<!DOCTYPE html>

<html>

<head>

    <title>无缝滚动</title>

    <style type="text/css">

    *{margin:0;padding:0;}

ul{list-style:none;float:left;}

li{margin: 5px;border:3px double #00a67c;float:left;}

li img{width:150px;float:left;}

#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}

#indemo{width:800%;float:left;}

    </style>

</head>

<body>

<div id="demo">

    <div id="indemo">

        <ul id="demo1">

            <li><img src="img/pic1.jpg"></li>

            <li><img src="img/pic2.jpg"></li>

            <li><img src="img/pic3.jpg"></li>

            <li><img src="img/pic4.jpg"></li>

            <li><img src="img/pic5.jpg"></li>

            <li><img src="img/pic6.jpg"></li>

            <li><img src="img/pic7.jpg"></li>

        </ul>

        <ul id="demo2"></ul>

    </div>

</div>

</body>

</html>

有了基本结构后，就要让图片动起来，为了实现图片的无缝滚动，将存放图片的ul进行复制，放在其后，模拟循环效果。其次，每当图片滚动到复制元素的最后一张图片时，就应该让图片重新回到最开始的状态再继续滚动，这样的话就形成了无缝循环滚动的效果。

<script type="text/javascript">

       window.onload = function(){

    var age = 20;

    var tab = document.getElementById('demo');

    var tab1 = document.getElementById('demo1');

    var tab2 = document.getElementById('demo2');

    tab2.innerHTML = tab1.innerHTML;

    function run(){

        //tab1的宽度小于 tab被隐藏的宽度；

        if(tab1.offsetWidth - tab.scrollLeft <=0 ){

            //重置tab被隐藏的宽度

            tab.scrollLeft -= tab1.offsetWidth;

        }else {

            tab.scrollLeft++;

        }

    };

    var mymar = setInterval(run,age);

}

    </script>

最后就是优化了，当鼠标悬浮时停止滚动，鼠标离开后继续滚动。

<script type="text/javascript">

    tab.onmouseover = function(){

        clearInterval(mymar);

    }

    tab.onmouseout = function(){

        mymar = setInterval(run,age);

    }

 </script>

到此，我们就实现了最开始想要的效果了，完整代码如下：

<!DOCTYPE html>

<html>

<head>

    <title>无缝滚动</title>

    <style type="text/css">

    *{margin:0;padding:0;}

ul{list-style:none;float:left;}

li{margin: 5px;border:3px double #00a67c;float:left;}

li img{width:150px;float:left;}

#demo{width:800px;overflow: hidden;margin:100px auto;border: 1px solid #999;}

#indemo{width:800%;float:left;}

    </style>

</head>

<body>

<div id="demo">

    <div id="indemo">

        <ul id="demo1">

            <li><img src="img/pic1.jpg"></li>

            <li><img src="img/pic2.jpg"></li>

            <li><img src="img/pic3.jpg"></li>

            <li><img src="img/pic4.jpg"></li>

            <li><img src="img/pic5.jpg"></li>

            <li><img src="img/pic6.jpg"></li>

            <li><img src="img/pic7.jpg"></li>

        </ul>

        <ul id="demo2"></ul>

    </div>

</div>

<script type="text/javascript">

       window.onload = function(){

    var age = 20;

    var tab = document.getElementById('demo');

    var tab1 = document.getElementById('demo1');

    var tab2 = document.getElementById('demo2');

    tab2.innerHTML = tab1.innerHTML;

    function run(){

        if(tab1.offsetWidth - tab.scrollLeft <=0 ){

            tab.scrollLeft -= tab1.offsetWidth;

        }else {

            tab.scrollLeft++;

        }

    };

    var mymar = setInterval(run,age);

    tab.onmouseover = function(){

        clearInterval(mymar);

    }

    tab.onmouseout = function(){

        mymar = setInterval(run,age);

    }

}

    </script>

</body>

</html>

完整详细代码链接：点这里

JavaScript之图片操作6的更多相关文章

  1. JavaScript之图片操作7

    前面总结了很多了有关于图片操作的案例,本次是基于前面的基础,做一个综合的图片轮播效果,需要实现以下功能: 没有任何操作时,图片自动轮播 鼠标悬浮时,图片停止轮播:当鼠标移开,轮播继续 鼠标悬浮时,出现 ...

  2. JavaScript之图片操作5

    本次的图片操作是要实现模仿天猫淘宝的放大镜效果,如下图所示: 其实现原理其实很简单,主要就是定位的运用,在上面的图中,左边是一个div,它的大小就是左边图片的大小,我们称为左窗口(原图),红色部分我们 ...

  3. JavaScript之图片操作1

    在网页中,经常需要对图片经常各种操作,包括切换,轮播等等,接下来将总结一些常见的图片操作,首先是最简单前后切换. 如上面所示,通过点击右边的按钮切换左边的图片,为了实现想要的效果,首先,我们需要在ht ...

  4. JavaScript之图片操作3

    在页面布局中,常常会用到九宫格布局,如下图所示: 本次我们就以九宫格为基础进行图片的布局操作,首先我们以上面的图片的为例,假设每个格子的大小都相同,将每一个格子相对其父元素进行定位,这样,我们只需要控 ...

  5. JavaScript之图片操作4

    本次要实现的效果是,在一个盒子里面有一张长图,只显示了一部分,为方便用户浏览,当鼠标移入时,图片开始滚动,将盒子分成上下两部分,当鼠标移入上部分时,图片向上滚动,当鼠标移入下部分时,图片向下滚动. 为 ...

  6. JavaScript之图片操作2

    在前一次,我们实现最简单的图片切换效果,这一次,依旧还是图片切换,具体效果如下: 通过点击下面的小图,上面的大图和标题随之切换.因此,我们需要三个容器分别放标题,大图和小图. <!--大图描述- ...

  7. JavaScript校验图片格式及大小

    <!DOCTYPE html> <html> <head> <title>JavaScript校验图片格式及大小</title> <s ...

  8. 网站开发综合技术 三 JavaScript的DOM操作

    第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...

  9. JavaScript DOM 基础操作

    JavaScript DOM 基础操作 一.获取元素的六方式 document.getElementById('id名称') //根据id名称获取 document.getElementsByclas ...

随机推荐

  1. Codeforces Round #519

    题目链接:传送门   A. Elections (思维+暴力) 思路: 从最小的k开始枚举就好了- -. #include <bits/stdc++.h> using namespace ...

  2. Linux使用sshfs挂载远程目录到本地

    1安装sshfs [root@iZwz9hy7gff0kpg1swp1d3Z ~]# yum install sshfs 2创建本地目录 [root@iZwz9hy7gff0kpg1swp1d3Z ~ ...

  3. 20165313 《Java程序设计》第二周学习总结

    教材学习总结 这周我主要学习了教材上的二,三两章.其基本内容就是数据与语句的表达与基本的运用.其中重点要理解并掌握的是: 1.Scanner的运用:利用该类创建对象就可以完成要求用户输入这一要求.类似 ...

  4. Liunx----vi编辑器

    关于vi编辑器基本的用法总结如下: vi是linux下的一款文编编辑器. 进入vi的方法:在系统启动起来后,直接键入vi或vi 文件名: 进去后输入内容方法:输入a或i,切换到编辑模式: 退出编辑模式 ...

  5. Oracle 11g direct path read 等待事件的理解

    在Oracle 11g中,全表扫描可能使用direct path read方式,绕过buffer cache,这样的全表扫描就是物理读了. 在10g中,都是通过gc buffer来读的,所以不存在di ...

  6. C语言函数指针的使用

    使用函数指针时一定要注意,因为c不会检查参数是否正确 区分返回指针的函数和函数指针 int *f4();返回一个整数指针 int (*f5)();返回整数的函数指针 int * (*f6)();返回整 ...

  7. Server 2008 R2部署active directory服务器-ad域

    一.部署AD域: 系统环境:Windows server 2008 R2 标准版 ip:172.16.1.149服务器开机后会自动弹出一个初始配置任务窗口(这个不要随便关闭,因为我不知道关闭后能在哪里 ...

  8. day43 数据库学习egon的博客 索引

    一 介绍 为何要有索引? 一般的应用系统,读写比例在10:1左右,而且插入操作和一般的更新操作很少出现性能问题,在生产环境中,我们遇到最多的,也是最容易出问题的,还是一些复杂的查询操作,因此对查询语句 ...

  9. GitLab Shell如何通过SSH工作

    转自:https://wayjam.me/post/how-gitlab-shell-works-with-ssh.md GitLab访问Git仓库 首先回顾GitLab的Git仓库四种访问方式: g ...

  10. sqler sql 转rest api 源码解析（四）macro 的执行

    macro 说明 macro 是sqler 的核心,当前的处理流程为授权处理,数据校验,依赖执行(include),聚合处理,数据转换 处理,sql 执行以及sql 参数绑定 授权处理 这个是通过go ...