参考：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. C#中，用户控件UserControl里面用Panl加载UserControl，并实现利用委托互相传值

    用户控件主窗体结构:左侧树形菜单,右侧Panl: 根据点击的菜单节点,panl里面选择性加载某一个子窗体用户控件,并传值给子窗体: 反之,在子窗体进行相应的操作之后,传值给主窗体,触发主窗体的刷新. ...

  2. python ORM框架：SqlAlchemy

    ORM,对象关系映射,即Object Relational Mapping的简称,通过ORM框架将编程语言中的对象模型与数据库的关系模型建立映射关系,这样做的目的:简化sql语言操作数据库的繁琐过程( ...

  3. css---2D变形

    1.transfrom:rotate(360deg); 用前要加transition: 2s;                      deg重点 transform:rotate(angle); ...

  4. Android App上架流程

    想要把APP上架到应用市场都要先注册开发者账号才可以.这里的方法包括注册帐号和后期上架及一些需要注意的问题.注意:首次提交应用绝对不能随便删除,否则后面再提交会显示应用APP冲突,会要求走应用认领流程 ...

  5. Flink SQL 系列 | 5 个 TableEnvironment 我该用哪个？

    本文为 Flink SQL 系列文章的第二篇,前面对 Flink 1.9 Table 新架构及 Planner 的使用进行了详细说明,本文详细讲解 5 个 TableEnvironment 及其适用场 ...

  6. iOS开发Drag and Drop简介

    1.Drag and Drop简介 Drag and Drop是iOS11的新特性,可以将文本.图片进行拖拽到不同app中,实现数据的传递.只不过只能在iPad上使用,iPhone上只能app内部拖拽 ...

  7. hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  8. 拦截器（Interceptor）与过滤器（Filter）的区别

    转自:https://www.jianshu.com/p/cf088baa9b04 过滤器,是在java web中将你传入的request.response提前过滤掉一些信息,或者提前设置一些参数.然 ...

  9. ps axu 参数说明

    问题:1.ps axu  看到进程的time不清楚什么意思 ru: resin    31507  0.2  1.3 3569452 98340 ?       Sl   Jul28   7:11 / ...

  10. 筛法求欧拉函数（poj2478

    求1-n的欧拉函数的值 #include <iostream> #include <cstdio> #include <queue> #include <al ...