效果：

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函数 函数调用 函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

    函数调用 函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名. 第一种情况:在<script>标签内调用. <script type="text/java ...

  2. EXCEL表格链接SQLSEVER数据库

    Sub 数据库连接()     Set Cnn = CreateObject("ADODB.Connection")    Set rs = CreateObject(" ...

  3. linux 系统优化,调优

    1.系统安装前的规则 a.分区:不同环境不同分法,按自己的需求来 以硬盘500G为例 /boot 100M-200M(只存放grub和启动相关文件,不存放其他) /  80G-100G (因为很多人默 ...

  4. python的update方法

    b = {"c":0, "position":{}} b["position"]["IF"] = {} print(b) ...

  5. java运行字符串代码

    本文链接:https://blog.csdn.net/junlong750/article/details/50945883

  6. thinkphp 原样输出

    可以使用literal标签来防止模板标签被解析,例如: 大理石构件 <literal> <if condition="$name eq 1 "> value ...

  7. Git中.gitignore忽略规则

    # 此为注释 – 将被 Git 忽略 *.a # 忽略所有 .a 结尾的文件 !lib.a # 但 lib.a 除外 /TODO # 仅仅忽略项目根目录下的 TODO 文件,不包括 subdir/TO ...

  8. 怎样配置duilib

    duilib是一个免费的界面库,它可利用xml文件自定义界面元素,并且可以在商业项目中无偿使用.怎样在VS中配置duilib界面库呢?请看下面的介绍. 工具/原料 duilib 下载和编译duilib ...

  9. webpack官方文档学习

    一.webpack是什么? webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 二.安装 前提条 ...

  10. redis：info详解

    [root@192.168.56.159 redis6380]redis-cli -a xxx info# Serverredis_version:3.0.7  redis_version: Redi ...