参考：https://www.cnblogs.com/LIUYANZUO/p/5679753.html

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>js横向轮播</title>

        <style type="text/css">

            body {

                margin: 0;

            }

            #container {

                position: relative;

                width: 100%;

                height: 300px;

                overflow: hidden;

                z-index: -1;

            }

            #list {

                position: absolute;

                width: 4200px;

                height: 300px;

            }

            #list .img {

                float: left;

                /* width: 375px; */

                height: 300px;

            }

        </style>

    </head>

    <body>

        <div id="container">

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

        </div>

    </body>

    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <script type="text/javascript">

        window.onload = function() {

            var container = document.getElementById('container'),

                list = document.getElementById('list'),

                index = 1;

            $('#list').css('left', -screen.width + 'px');

            var timer;

            var imgList = [{

                        src: 'img/1.jpg'

                    },

                    {

                        src: 'img/2.jpg'

                    },

                    {

                        src: 'img/3.jpg'

                    },

                    {

                        src: 'img/4.jpg'

                    },

                    {

                        src: 'img/5.jpg'

                    }

                ],

                l = imgList.length - 1,

                len = imgList.length,

                w = screen.width,

                string = '';

            string = makeStr(imgList, l);

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

            var j = 0;

            while (j < imgList.length) {

                string = makeStr(imgList, j);

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

                j++;

            }

            string = makeStr(imgList, 0);

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

            $('#list .img').css('width', screen.width + 'px');

            function makeStr(arr, i) {

                string = "<div class='img' style='background:url(" +

                    arr[i].src + ") no-repeat;background-size:100%'/></div>";

                return string;

            }

            function animate(offset) {

                var newLeft = parseInt(list.style.left) + offset;

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

                if (newLeft > -w) {

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

                }

                if (newLeft < -w * len) {

                    list.style.left = -w + 'px';

                }

            }

            function play() {

                timer = setInterval(function() {

                    start();

                }, 2000)

            }

            function start() {

                index += 1;

                if (index > len) {

                    index = 1

                }

                animate(-w);

            };

            function stop() {

                clearInterval(timer);

            }

            if (imgList.length > 1) {

                play();

            }

        }

    </script>

</html>

js 实现横向轮播效果的更多相关文章

  1. html中使用JS实现图片轮播效果

    1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...

  2. 原生JS实现幻灯片轮播效果

    在以往的认知中,一直以为用原生JS写轮播是件很难得事情,今天上班仿照网上的写了一个小demo.小试牛刀. 大致效果: html结构很简单,两个列表,一个代表图片列表,一个是右下角序号列表. <d ...

  3. 原生js实现图片轮播效果

    思路:设置父容器(一定宽度,一定高度,相对定位,子容器超出部分进行隐藏),子容器图片并排(浮动,绝对定位,每次点击进行相应的左或右偏移量) 1.html: <!DOCTYPE html> ...

  4. [Js]焦点图轮播效果

    一.所用到的知识点 1.DOM操作 2.定时器 3.事件运用 4.Js动画 5.函数递归 6.无限滚动大法 二.结构和样式 <div id="banner" class=&q ...

  5. 原生js重写《锋利的JS》之 轮播效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JQuery简单实现图片轮播效果

    很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...

  7. 针对淡入淡出的定时轮播效果js

    如果不使用jquery的fadeIn和fadeOut的接口和不适用animate情况下,如果要做用js实现淡入淡出轮播效果,我所想到的办法就是使用css3新特性transition(注意好兼容性). ...

  8. js的轮播效果

    图片的轮播效果!主要运用了元素的style样式属性,与 setInterval(); <!DOCTYPE html> <html> <head lang="en ...

  9. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

随机推荐

  1. NLP杂点

    1.停用词 stop words: 在处理自然语言数据(或文本)之前或之后会自动过滤掉某些字或词. 停用词都是人工输入.或者由一个停用词表导入. 2.jieba是目前最好的 Python 中文分词组件 ...

  2. 取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏

    取消设置透明状态栏,使 ContentView 内容不再覆盖状态栏,在MainActivity中添加以下代码: getWindow().clearFlags(WindowManager.LayoutP ...

  3. CSS——精灵技术

    精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

  4. myeclipse CTRL+1功能

    有时候,在myeclipse或者eclipse中自动编译代码有错误,我们把鼠标放在错误一行能够自动显示出问题原因,但是有时显示问题让人有些匪夷所思,不知所云何物. 此时可以使用<ctrl> ...

  5. Linux课程---16、apache虚拟主机设置（如何在一台服务器上配置三个域名）

    Linux课程---16.apache虚拟主机设置(如何在一台服务器上配置三个域名) 一.总结 一句话总结:有三个网站www.lampym.com,bbs.lampym.com,mysql.lampy ...

  6. 微软RPC官方教程

    http://msdn.microsoft.com/en-us/library/windows/desktop/aa379010(v=vs.85).aspx 注意:原文版本较老,我更新和改变了部分内容 ...

  7. System.Web.Mvc.ActionResult.cs

    ylbtech-System.Web.Mvc.ActionResult.cs 1.程序集 System.Web.Mvc, Version=5.2.3.0, Culture=neutral, Publi ...

  8. JAVA 设计模式之 原型模式详解

    原型模式(Prototype Pattern)是指原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式利用的是克隆的原理,创建新的对象,JDK提供的Cloneable 和JSON. ...

  9. python基于SMTP发送邮件

    import smtplib from email.header import Header from email.mime.text import MIMEText ''' SMTP是发送邮件的协议 ...

  10. clipboard.js操作剪贴版——一些移动端交互和兼容经验

    https://github.com/zenorocha/clipboard.js 库,真的是个好库,而且不依赖flash,几乎完美支持移动端.但是,移动端应用有些不趟不知的小tip,这里归档下. 原 ...