<!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. [UWP]涨姿势UWP源码——Unit Test

    之前我们讨论了涨姿势UWP的RSS数据源获取,以及作为文件存储到本地,再将数据转化成Model对象.这部分非UI的内容非常适合添加Unit Test.不涉及UI的话,UT写起来简单高效,很是值得投入一 ...

  2. 数据结构：C_顺序栈的实现

    数据结构顺序栈的实现(C语言版) 1.写在前面 栈是一种遵循元素先进(Push)后出(Pop)规则的线性表,它的实现可以用数组或者链表. ..... 2.代码分解 2.1对栈的结构定义: typede ...

  3. Android基于mAppWidget实现手绘地图（六）–如何展示地图对象

    为了展示选中的点,你需要完成以下步骤: 1.创建或者获得一个已经存在的图层 2.创建代表选中点的地图对象 3.把地图对象添加到图层 创建新图层 使用以下代码片段创建图层 int COFFEE_SHOP ...

  4. 机器学习&数据挖掘笔记_13（用htk完成简单的孤立词识别）

    最近在看图模型中著名的HMM算法,对应的一些理论公式也能看懂个大概,就是不太明白怎样在一个具体的机器学习问题(比如分类,回归)中使用HMM,特别是一些有关状态变量.观察变量和实际问题中变量的对应关系, ...

  5. Cordova webapp实战开发：（5）如何写一个Andorid下自动更新的插件？

    在 <Cordova webapp实战开发:(4)Android环境搭建>中我们搭建好了开发环境,也给大家布置了调用插件的预习作业,做得如何了呢?今天我们来学一下如何自己从头建立一个And ...

  6. NIO的一坑一惑小记

    前言 不知不觉,已那么长时间没有更新东西了,说来真是汗颜啊.(主要是最近在技术上豁然开朗的感觉越来越少了-_-|||) 最近一直在学习Linux相关的东西.又一次接触到了I/O复用模型(select/ ...

  7. java并发编程：并发容器之CopyOnWriteArrayList（转）

    原文:http://ifeve.com/java-copy-on-write/ Copy-On-Write简称COW,是一种用于程序设计中的优化策略.其基本思路是,从一开大家都在共享同一个内容,当某个 ...

  8. 基于HTML5的WebGL电信网管3D机房监控应用

    先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...

  9. javascript必知必会：面象对象编程

    面象对象编程技术的核心理念:封装.继承.多态:在一些主流的高级编程语言中,比如:C#,VB.NET,JAVA,PHP等都是很容易实现的,而如果要在javascript中实现面象对象编程,可就不那么直接 ...

  10. C#基础03

    学习集合的一些知识.集合:泛型集合,非泛型集合;ArrayList,Hashtable,List<T>,Dictionary<k,v>等,还有一些集合的常用方法. 一:集合的介 ...