效果：

html:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

        <title>滚动+停顿</title>

        <style type="text/css">

            body {

                margin: 0;

            }

            #container {

                position: relative;

                height: 200px;

                overflow: hidden;

            }

            #list {

                position: absolute;

                z-index: 1;

                width: 4200px;

                height: 200px;

            }

            #list .item {

                float: left;

                text-align: center;

            }

            .slide {

                width: 200px;

                height: 200px;

            }

        </style>

        <script src="js/jquery.js"></script>

    </head>

    <body>

        <div id="container" class="container">

            <div id="list"></div>

        </div>

        <script type="text/javascript" language=javascript>

            window.qglist = [{

                    gimg: 'img/1.jpg',

                    gname: '111'

                },

                {

                    gimg: 'img/2.jpg',

                    gname: '222'

                },

                {

                    gimg: 'img/3.jpg',

                    gname: '333'

                }

            ];

            initScroll();

            function initScroll() {

                var len = window.qglist.length,

                    j = 0,

                    l = window.qglist.length - 1,

                    string1 = makeStr(window.qglist, l),

                    string2 = makeStr(window.qglist, 0);

                $('#list').append(string1);

                while (j < len) {

                    var string = makeStr(window.qglist, j);

                    $('#list').append(string);

                    j++;

                }

                $('#list').append(string2);

                window.scrWid = $('.container')[0].offsetWidth + 'px';

                $('#list').css("left", '-' + scrWid);

                $('.item').css("width", scrWid);

                var container = $('#container'),

                    list = document.getElementById('list'),

                    index = 1,

                    timer;

                function animate(offset, unit) {

                    var newLeft = parseInt(list.style.left) - unit,

                        newL = Math.abs(newLeft),

                        scrW = parseInt(window.scrWid),

                        num = newL % scrW;

                    if (num == 0) {

                        stop();

                        setTimeout(function() {

                            play();

                        }, 2000);

                    }

                    list.style.left = newLeft + 'px';

                    //无限滚动判断

                    if (newLeft > offset) {

                        list.style.left = offset * len + 'px';

                    }

                    if (newLeft < offset * (len + 1)) {

                        list.style.left = offset + 'px';

                    }

                }

                function play() {

                    //重复执行的定时器

                    timer = setInterval(function() {

                        start();

                    }, 1)

                }

                function stop() {

                    clearInterval(timer);

                }

                function start() {

                    if (index > len) {

                        index = 1

                    }

                    var n = parseInt(scrWid);

                    animate(-n, 1);

                    index += 1;

                };

                if (len > 1) {

                    play();

                }

            }

            function makeStr(arr, n) {

                var str = "<div class='item'><div>" +

                    "<img class='slide' src='" + arr[n].gimg + "'></div></div>";

                return str;

            }

        </script>

    </body>

</html>

js 实现横向滚动轮播并中间暂停下的更多相关文章

  1. H5滚动轮播插件

      概述 JRedu 随着前端技术的发展,越来越多的H5技术被应用到实际开发中,尤其是js插件更是无处不用,本章节我们主要分享下如何去自己封装一个滚动轮播插件. 1效果图如下: 2主要功能   支持超 ...

  2. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  3. JS实现小图放大轮播效果

    JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: <body> ...

  4. 纯js轮播图练习-2，js+css旋转木马层叠轮播

    基于css3的新属性,加上js的操作,让现在js轮播图花样越来越多. 而现在出现的旋转木马层叠轮播的轮播图样式,却是得到了很多人都喜爱和投入使用. 尤其是在各大软件中,频繁的出现在大家的眼里,在web ...

  5. iOS swift版本无限滚动轮播图

    之前写过oc版本的无限滚动轮播图,现在来一个swift版本全部使用snapKit布局,数字还是pageConrrol样式可选 enum typeStyle: Int { case pageContro ...

  6. js实现图片无缝轮播

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. js原生选项卡（自动播放无缝滚动轮播图）二

    今天分享一下自动播放轮播图,自动播放轮播图是在昨天分享的轮播图的基础上添加了定时器,用定时器控制图片的自动切换,函数中首先封装一个方向的自动播放工能的小函数,这个函数中添加定时器,定时器中可以放向右走 ...

  8. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

  9. 滚动轮播插件——jCarouselLite

    jcarousellite(上下.水平滚动元素插件)插件使用: 参数说明: btnPrev     string 上一个按钮的class名, 比如  btnPrev: ".prev" ...

随机推荐

  1. JS对象 返回/设置年份方法 get/setFullYear() 返回/设置年份，用四位数表示。.顺序格式依次为：星期、月、日、年、时、分、秒、时区。(火狐浏览器)

    返回/设置年份方法 get/setFullYear() 返回/设置年份,用四位数表示. var mydate=new Date();//当前时间2014年3月6日 document.write(myd ...

  2. amaze UI(mark)

    为移动而生 Amaze UI 以移动优先(Mobile first)为理念,从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流. 组件丰富,模块化 Amaze UI 含近 20 个 CSS ...

  3. Android开发 View_自定义圆环进度条View

    前言 一个实现,空心圆环的自定义View,已经封装完好,可以直接使用. 效果图 代码 import android.content.Context; import android.graphics.C ...

  4. Linux CentOS 6.7 挂载U盘

    1. 首先查看U盘是否成功安装fdisk -l 2. 在/mnt下创建U盘目录mkdir /mnt/usb 3. 挂载U盘mount -t vfat /dev/sdb1 /mnt/usb 4. 卸载U ...

  5. .NETFramework：Exception

    ylbtech-System.Exception.cs 1.返回顶部 1. #region 程序集 mscorlib, Version=4.0.0.0, Culture=neutral, Public ...

  6. <linux常用命令>初级版

    显示时间 date 显示日历cal 变换目录 cd 显示当前所在目录 pwd 建立新目录 mkdir -p a/b/c 删除空目录 rmdir 当前目录下文件和目录显示 ls 复制 cp 文件 路径 ...

  7. js 实现vue—引入子组件props传参

    参考:https://www.cnblogs.com/xiaohuochai/p/7388866.html 效果 html <!DOCTYPE html> <html> < ...

  8. 设置Hadoop+Hbase集群pid文件存储位置

    有时候,我们对运行几天或者几个月的hadoop或者hbase集群做停止操作,会发现,停止命令不管用了,为什么呢? 因为基于java开发的程序,想要停止程序,必须通过进程pid来确定,而hadoop和h ...

  9. UBOOT把文件写入 NandFlash

    如果把一个传到内存中的文件写入到 Nand Flash 中, 如:新的 uboot.bin, zImage(内核), rootfs 等, 如果做呢?我们可以用 Nand Flash 命令来完成. 但是 ...

  10. JavaScript特效源码(7、页面特效二)

    7.将站点加入频道栏 将站点加入频道栏[看详细说明] ====1.加入channel的方法:使用如下连接指向你的频道文件*.cdf. <a href="javascript:windo ...