<!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. 百度地图JavaScript API覆盖物旋转时出现偏移

    在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...

  2. HTML5移动Web开发（二）——配置移动开发环境以及简单示例

    一.准备 1.配置本地网络服务.对于Windows.Mac和Linux,最容易的方法是使用免费的XAMPP软件:http://www.apachefriends.org/en/index.html X ...

  3. Android自定义EditText去除边框并添加下划线

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  4. Spark入门实战系列--8.Spark MLlib（下）--机器学习库SparkMLlib实战

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .MLlib实例 1.1 聚类实例 1.1.1 算法说明 聚类(Cluster analys ...

  5. c#字符串操作方法实例

    # 字符串是使用 string 关键字声明的一个字符数组.字符串是使用引号声明的,如下例所示: string s = "Hello, World!"; 字符串对象是“不可变的”,即 ...

  6. $("#id").val()取值textarea是""

    今天取值的时候,判断是null可以通过,证明不是null,明明是空的. 判断是''通过,证明取出来的是''空字符串.

  7. Windows Server 2012安装时所需要的KEY

    Windows Server 2012不像Server 2008和2008 R2那样可以先装系统再输入序列号,而是在一开始就必须输入Server 2012 cdkey,目前在网上找到两枚序列号,标准版 ...

  8. ADO.NET封装的SqlHelper

    参照别人的方法,顺便再次复习下ADO.NET的相关知识.为自己的类库做准备. namespace Common.SqlHelper { /// <summary> /// ADO.NET- ...

  9. js观察者模式学习

    function Events(){ var obj = {}; this.on=function(key,fn){ var stack; stack = obj[key] || (obj[key] ...

  10. 2013最新版Subversion 1.7.10 for Windows x86 + Apache 2.4.4 x64 安装配置教程+错误解决方案

    一 .工作环境 操作系统:Windows Server 2008 R2 SP1 x64 Apache版本:2.4.4 Subversion版本: Setup-Subversion-1.7.10.msi ...