<!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. 轻松自动化---selenium-webdriver(python) (六)

    本节知识点: 操作对象: · click 点击对象 · send_keys 在对象上模拟按键输入 · clear 清除对象的内容,如果可以的话 WebElement  另一些常用方法: · text  ...

  2. Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编

    Linux C++ 调试神技--如何将Linux C++ 可执行文件逆向工程到Intel格式汇编 对于许多在windows 上调试代码的人而言, Intel IA32格式的汇编代码可能并不陌生,因为种 ...

  3. Zip文件中文乱码问题解决方法(MAC->Windows)

    前言: 最近收到的ZIP交互原型,打开查看中文一堆乱码.主要是产品都是高大上啊,用的都是MAC,咱酷毙用的Windows,话说安卓APP,你用MAC搞啥啊.可恨的压缩用的是zip,不是rar之类的.为 ...

  4. Windows Azure Cloud Service (10) Role的生命周期

    <Windows Azure Platform 系列文章目录> 在上一章内容中,我们提到了Windows Azure会依次调用角色(Role)实例的OnStart()方法和Run()方法. ...

  5. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  6. caffe 试运行MNIST

    转自:http://www.cnblogs.com/NanShan2016/p/5469942.html 编译完caffe后,在D:\caffe\caffe-master\caffe-master\b ...

  7. Java中的逆变与协变

    看下面一段代码 Number num = new Integer(1); ArrayList<Number> list = new ArrayList<Integer>(); ...

  8. OpenJudge 2985数字组合 解析报告/DP

    2985:数字组合 总时间限制:  1000ms 内存限制:  65536kB 描述 有n个正整数,找出其中和为t(t也是正整数)的可能的组合方式.如:n=5,5个数分别为1,2,3,4,5,t=5: ...

  9. 控件使用经验-MVP模式+控件封装

    项目背景 几年前参与了一个面向学校的人事管理软件的开发,基于WinForm平台.今天主要想谈一谈其中关于控件的使用经验.这个项目我们大量使用了第三方控件.由于这个产品的生命周期很长,我们在设计时要考虑 ...

  10. 我所理解的readonly和const

    最近要给学校软件小组新成员讲几次课,所以把很多以前懒得学习的和模糊不清的知识点,重新学习了一下. MSDN是这样解释的: readonly 关键字与 const 关键字不同. const 字段只能在该 ...