效果：

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. 多版本JDK 切换

    由于一些原因,我本机存在3个版本的jdk. 但是发现,单纯去 修改环境变量,并没有效果. 那么我们下面看看怎么改 1 查看本机版本    java -version 2 查看jdk路径   where ...

  2. (转载)js引擎的执行过程（一）

    概述 js是一种非常灵活的语言,理解js引擎的执行过程对我们学习javascript非常重要,但是网上讲解js引擎的文章也大多是浅尝辄止或者只局部分析,例如只分析事件循环(Event Loop)或者变 ...

  3. 单独编译和使用webrtc音频降噪模块(附完整源码+测试音频文件)

    单独编译和使用webrtc音频增益模块(附完整源码+测试音频文件) 单独编译和使用webrtc音频回声消除模块(附完整源码+测试音频文件) webrtc的音频处理模块分为降噪ns,回音消除aec,回声 ...

  4. 最大流拆点——hdu2732，poj3436

    一种很普遍的做法就是把一个带有容量的点拆成两个点,一个入点一个出点,链接两个点的边的权值为这个点的容量 hdu3732 #include<cstdio> #include<cstri ...

  5. C++在#include命令中，用〈 〉和“”有什么区别

    使用尖括号表示在包含文件目录中去查找(包含目录是由用户在设置环境时设置的),而不在源文件目录去查找: 使用双引号则表示首先在当前的源文件目录中查找,若未找到才到包含目录中去查找.  

  6. 服务器断过一次电之后，mysql启动不了了

    公司内部服务器,周末会直接拉闸断电,之前也没问题,但这次回来发现mysql启动不了了. service mysqld start 提示: Starting MySQL.The server quit ...

  7. private定义的static字段子其他类能通过"类名.字段名"调用吗？

    不能!

  8. 14.data.js

    dict_data = { "_id":1, name:"王五", age:55, gender:true } db.stu.insert(dict_data) ...

  9. Python对接支付宝支付自实现

    Python对接支付宝支付自实现 # -*- coding: utf-8 -*- import base64 import json import urllib.parse from datetime ...

  10. uoj#311 【UNR #2】积劳成疾

    题目 考虑直接顺着从\(1\)填数填到\(n\)发现这是在胡扯 所以考虑一些奇诡的东西,譬如最后的答案长什么样子 显然某一种方案的贡献是一个\(\prod_{i=1}^nw_i^{t_i}\)状物,\ ...