<!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. php易混淆知识点

    一.define(“constant”,  “hello world”);和const constant = “hello world”;的区别? (0).使用const使得代码简单易读,const本 ...

  2. 解决jquery和prototype库冲突问题

    在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...

  3. 如何在Notepad++ 中成功地安装Emmet 插件

    对于前端来说,Emmet 是一个好东西,但是好几次在 “Notepad++” 中安装后不能使用.今天认认真真地查找了失败原因,配置完成后,终于可以在 “Notepad++” 下正常使用了.故把过程记录 ...

  4. Testing - 测试基础 - 方法

    选择和使用测试方法和工具 按照测试需求用途(或测试技巧)选择 在软件开发生命周期和软件测试流程中适当地选择 按照测试人员实际技能选择 选择可提供的和可执行的 测试方法 类别及技巧 目标 使用方法 举例 ...

  5. php版本历史

    php最初就是为了快速构建一个web页面而迅速被大家广为接受的.它的好处是在代码中能内嵌html的代码,从而让程序员能再一个页面中同时写html代码和php代码就能生成一个web页面. 这篇文章用时间 ...

  6. 基于HTML5树组件延迟加载技术实现

    HT for Web的HTML5树组件有延迟加载的功能,这个功能对于那些需要从服务器读取具有层级依赖关系数据时非常有用,需要获取数据的时候再向服务器发起请求,这样可减轻服务器压力,同时也减少了浏览器的 ...

  7. Java魔法堂：类加载机制入了个门

    一.前言 当在CMD/SHELL中输入 $ java Main<CR><LF> 后,Main程序就开始运行了,但在运行之前总得先把Main.class及其所依赖的类加载到JVM ...

  8. 如果根据键盘的frame始终让一个控件始终在键盘的顶部

    我们发现很多时候系统提供的键盘功能有限 有些功能无法实现,所以我们通常的做法就是自定义一个工具条放在键盘的顶部. 那么我们如何知道键盘的frame呢? 这个时候就需要监听键盘发出的通知,在ios中当键 ...

  9. swift3.0的改变

    Swift在这2年的时间内,发展势头迅猛,在它开源后,更是如井喷一样,除了 iOS.mac 平台,还支持了 Linux. 而今年下半年, Swift 3.0 也会随之发布.https://github ...

  10. LINQ to SQL语句(4)之Join

    适用场景:在我们表关系中有一对一关系,一对多关系,多对多关系等.对各个表之间的关系,就用这些实现对多个表的操作. 说明:在Join操作中,分别为Join(Join查询), SelectMany(Sel ...