<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>无缝滚动2</title>

    <style>

    #warp{

        width: 1250px;

        height: 300px;

        overflow: hidden;

        margin:100px auto 0;

        overflow-x: auto;

    }

    #warp #con{

        width: 4000px;

        height: 300px;

        overflow: hidden;

    }

    #warp #con #box1{

         float: left;

         overflow: hidden;

    }

    #warp #con #box2{

         float: left;

         overflow: hidden;

    }

    #warp img{

        float: left;

        margin-right: 10px;

        width: 200px;

        height: 300px;

    }

    .btn{

        text-align: center;

        margin-top: 10px;

    }

    .btn button{

        font-size: 16px;

    }

    </style>

</head>

<body>

    <div id="warp">

        <div id="con">

            <div id="box1">

                <img src="data:images/meinv1.jpg" alt="">

                <img src="data:images/meinv2.jpg" alt="">

                <img src="data:images/meinv3.jpg" alt="">

                <img src="data:images/meinv4.jpg" alt="">

                <img src="data:images/meinv5.jpg" alt="">

                <img src="data:images/meinv6.jpg" alt="">

            </div>

            <div id="box2"></div>

        </div>

    </div>

    <div class="btn">

        <button id="scrollL"><<左滚</button>

        <button id="scrollR">右滚>></button>

    </div>

    <script>

        var warp=document.getElementById('warp');

        var con=document.getElementById('con');

        var box1=document.getElementById('box1');

        var box2=document.getElementById('box2');

        var img=box1.getElementsByTagName('img')[0];

        var scrollL=document.getElementById('scrollL');

        var scrollR=document.getElementById('scrollR');

        var timer1=null,timer2=null,flage=1;

        box2.innerHTML=box1.innerHTML;

        max=box1.clientWidth;

        imgmax=img.clientWidth+10;

        function scrollLeft(){

            flage=1;

            clearInterval(timer1);

            timer1=setInterval(function(){

                warp.scrollLeft++;

                if (warp.scrollLeft>=max) {

                    warp.scrollLeft=0;

                }

                if(warp.scrollLeft%imgmax==0){

                    clearInterval(timer1);

                    clearTimeout(timer2);

                    timer2=setTimeout(function(){

                        timer1=setInterval(scrollLeft,5)

                    },2000)

                }

            },5)

        }

        function scrollRight(){

            flage=0;

            clearInterval(timer1);

            timer1=setInterval(function(){

                warp.scrollLeft--;

                if (warp.scrollLeft<=0) {

                    warp.scrollLeft=max;

                }

                if(warp.scrollLeft%imgmax==0){

                    clearInterval(timer1);

                    clearTimeout(timer2);

                    timer2=setTimeout(function(){

                        timer1=setInterval(scrollRight,5)

                    },2000)

                }

            },5)

        }

            scrollLeft();

        scrollL.onclick=function(){

            // clearInterval(timer1);

            // clearTimeout(timer2);

            scrollLeft();

        }

        scrollR.onclick=function(){

            // clearInterval(timer1);

            // clearTimeout(timer2);

            scrollRight();

        }

        warp.onmouseenter=function(){

            clearInterval(timer1);

            clearTimeout(timer2);

        }

        warp.onmouseleave=function(){

            clearInterval(timer1);

            clearTimeout(timer2);

            console.log(flage);

            if (flage) {scrollLeft();}

               else{scrollRight();}

        }

    </script>

</body>

</html>

这种效果的具体效果是鼠标移上去滚动停止，移出滚动，滚动时是一张一张图片的滚动，即滚动一张之后停2s开始滚动下一张，具体内容请大家参考代码。

使用js实现带有停顿效果的图片滚动（按钮控制）的更多相关文章

  1. jquery delayLoading.js插件的延迟加载效果和图片延迟加载

    1.首页给大家介绍一下这款插件的主要用途 主要应用于图片的延迟加载,而且可以变换不同的延迟加载效果,适合相册图片.有做相册的可以考虑应用. 2.兼容IE7以上都兼容,其他的浏览器也兼容.所以说兼容性还 ...

  2. 图片滚动js代码

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. jquery图片滚动

    注:代码来自17sucai网,已去除部分冗余代码,只保留图片效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  4. Sequence.js 实现带有视差滚动特效的图片滑块

    Sequence.js 功能齐全,除了能实现之前分享过的现代的图片滑动效果,还可以融合当前非常流行的视差滚动(Parallax Scrolling)效果.让多层背景以不同的速度移动,形成立体的运动效果 ...

  5. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  6. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  7. ThinkPHP中关于JS文件如何添加类似__PUBLIC__图片路径

    在对html样式进行优化的时候,经常会用到Js/jquery进行一些跳转切换的样式,而我们常做的就是在Js/jquery代码中嵌url图片链接代码,以实现动态交互的页面效果. 如下图所示:

  8. js制作带有遮罩弹出层实现登录小窗口

    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...

  9. turn.js实现翻书效果

    JS插件网 http://www.ijquery.cn/?p=173 描述:Turn.js 是一个轻量级的 (15kb) jQuery/html5 插件用来创建类似书本和杂志翻页效果,支持触摸屏设备. ...

随机推荐

  1. 【web前端面试题整理03】来看一点CSS相关的吧

    前言 昨天我们整理了14到js的题,今天我们再来整理14到CSS相关的题目,昨天整理时候时间有点晚了我便有点心浮气躁,里面的一些题需要再次解答,好了看看今天有些什么吧. PS:我这里挑一点来做就好了, ...

  2. Nutch源码阅读进程4---parseSegment

    前面依次看了nutch的准备工作inject和generate部分,抓取的fetch部分的代码,趁热打铁,我们下面来一睹parse即页面解析部分的代码,这块代码主要是集中在ParseSegment类里 ...

  3. 初探JavaScript(四)——作用域链和声明提前

    前言:最近恰逢毕业季,千千万万的学生党开始步入社会,告别象牙塔似的学校生活.往往在人生的各个拐点的时候,情感丰富,感触颇深,各种对过去的美好的总结,对未来的展望.与此同时,也让诸多的老“园”工看完这些 ...

  4. 十款让 Web 前端开发人员更轻松的实用工具

    这篇文章介绍十款让 Web 前端开发人员生活更轻松的实用工具.每个 Web 开发人员都有自己的工具箱,这样工作中碰到的每个问题都有一个好的解决方案供选择. 对于每一项工作,开发人员需要特定的辅助工具, ...

  5. noip模拟赛 纸壳子

    Task 1.纸壳子(box.pas/box.c/box.cpp) [题目描述] Mcx是一个有轻度洁癖的小朋友.有一天,当他沉溺于数学卷子难以自拔的时候,恍惚间想起在自己当初学习概率的时候准备的一堆 ...

  6. HBase单个RegionServer的region数目上限

    前言 RegionServer维护Master分配给它的region,处理对这些region的IO请求,负责切分在运行过程中变得过大的region, 由于集群性能( 分配的内存和磁盘是有限的 )有限的 ...

  7. React Native版本升级的正确姿势

    基于React Native(简称:RN)的APP也发布了三个版本了,RN由于两周就会发布一版从最开始项目用的0.29到最近的0.37,做为一个开源项目来说更新真是跟坐火箭般快速,当然对于我们使用的人 ...

  8. JAVA - HashMap和HashTable

    1. HashMap 1)  hashmap的数据结构 Hashmap本质就是一个数组,只是当key值重复时,使用链表的方式来存储重复的key值(拉链法),注意:链表中存放的仍然是key值.如下图示: ...

  9. ASP.NET MVC初识

    最近在博客园看到了很多关于MVC的示例,自己打算写下来记录一下,如果有写得不对的地方,望大侠指出! 开始搭建项目 1. 建立Web项目 文件—>新建项目—>选择ASP.NET MVC4 W ...

  10. WinPhone学习笔记（四）——磁贴

    对每个Windows Phone的使用者来说,给他们的第一印象就是大大小小的磁贴——Metro,本篇介绍的是Windows Phone的磁贴,提到的有开始菜单的磁贴,也有在App里面的磁贴. 开始菜单 ...