效果：

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. 【学术篇】NOIP2017 d2t3 列队phalanx splay做法

    我可去他的吧.... ==============先胡扯些什么的分割线================== 一道NOIP题我调了一晚上...(其实是因为昨晚没有找到调试的好方法来的说...) 曾经我以 ...

  2. PHP算法之盛最多水的容器

    给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, 0).找出其中的两条线, ...

  3. CSIC_716_20191031【计算机的组成】

    引言 什么是编程语言 语言是人与人之间的沟通介质之一,编程语言是人与机器(包括计算机)之间沟通的介质. 一个完整的计算机系统主要包括     应用程序  .操作系统  和硬件   等. 计算机三大核心 ...

  4. CF930E Coins Exhibition

    题意:平面上一共有k个硬币(k<=1e9),给你n个区间这些区间中至少有一个硬币反面朝上,m个区间中至少有一个硬币正面朝上.问有多少种硬币放置方案?n,m<=100005. 标程: #in ...

  5. VC++中的CString、char、int类型转换

    1.如何将CString类型的变量赋给char*类型的变量   方法一:GetBuffer函数  使用CString::GetBuffer函数.  char *p;  CString str=&quo ...

  6. 杂项-IM：IM（即时通讯），一种基于互联网的即时交流消息的业务

    ylbtech-杂项-IM:IM(即时通讯),一种基于互联网的即时交流消息的业务 即时通讯(Instant Messaging)是目前Internet上最为流行的通讯方式,各种各样的即时通讯软件也层出 ...

  7. HDU-1501-Zipper-字符串的dfs

    Given three strings, you are to determine whether the third string can be formed by combining the ch ...

  8. <每日一题>题目2:编写装饰器,为多个函数加上认证功能(用户账号和密码来源于文件)

    这里做个最简单的账号密码验证,主要为了实现装饰器同时对多个函数起作用 FLAG = False #加一个变量防止多次登录验证 def wrapper(f): def inner(*args,**kwa ...

  9. Asp.Net中的HttpWebRequest类与HttpWebResponse类

    相关博文:https://www.cnblogs.com/xu-yi/p/10061342.html 相关博文:https://www.cnblogs.com/zoujinhua/p/11313396 ...

  10. Leetcode148. Sort List排序链表

    在 O(n log n) 时间复杂度和常数级空间复杂度下,对链表进行排序. 示例 1: 输入: 4->2->1->3 输出: 1->2->3->4 示例 2: 输入 ...