效果：

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. C#让两个长度相同的数组一一对应

    比如: string a[]={"x","y","z"} "} 用字典使其一一对应 Dictionary<string, s ...

  2. Android开发 解决Installation failed due to XXX 问题

    报错信息 Android studio 安装app的时候以下报错 Installation did not succeed. The application could not be installe ...

  3. spring整合Quartz框架过程，大家可以参考下

    这篇文章详细介绍了spring集成quartz框架流程,通过示例代码进行了详细说明,对学习或任务有参考学习价值,并可供需要的朋友参考. 1.quartz框架简介(m.0831jl.com) quart ...

  4. 阿里云宣布 Serverless 容器服务 弹性容器实例 ECI 正式商业化

    摘要: 阿里云宣布弹性容器实例 ECI(Elastic Container Instance)正式商业化,ECI 是阿里云践行普惠的云计算理念,将 Serverless 和 Container 技术结 ...

  5. iOS疑问

    1.__NSFrozenDictionaryM在数组类簇中是什么角色?

  6. JAXB注解使用

    一.Jaxb处理java对象和xml之间转换常用的annotation有: @XmlType @XmlElement @XmlRootElement @XmlAttribute @XmlAccesso ...

  7. Selenium+Webdriver被检测识别出来的应对方案

    在写爬虫,面对很多js 加载的页面,很多人束手无策,更多的人喜欢用Senlenium+ Webdriver,古语有云:道高一尺魔高一丈.已淘宝为首,众多网站都针对 Selenium的js监测机制, 比 ...

  8. JAVA工具包_BeanUtils

    简介 大多数的java开发者通常在创建Java类的时候都会遵循JavaBean的命名模式,对类的属性生成getters方法和setters方法.通过调用相应的getXxx和setXxx方法,直接访问这 ...

  9. 深入理解Android-清晰的理解Service

    1.什么是Service 2.Service的生命周期 3.Service的工作过程 4.Service的start和bind状态有什么区别? 5.同一个Service,先startService,然 ...

  10. vue引入外部css和js

    <template> <div id="app" > </div> </template> <script src=" ...