参考：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. 2019 年百度之星·程序设计大赛 - 初赛一 C. Mindis 离散化+dijkstra

    题目传送门 题意:中文题面 思路: 先将所有题目给出的点离散化一下,得到一张n*m的网格,n和m最大都是400,所以我们只需要枚举每个加强的区域,将属于这个区域的边处理一下(所有横着的和竖着的边,暴力 ...

  2. yii2中使用定义在 params.php文件中的配置

    yii2 使用 配置文件中在 params 的配置, 可以用 Yii::$app->params['key1']形式访问 参考 yii can't access Yii::$app->pa ...

  3. 40. 组合总和 II

    题目描述: 给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只 ...

  4. 校园商铺-2项目设计和框架搭建-7验证Dao

    以最简单的地区表为例 1.插入数据 insert into tb_area (area_name, priority) values('东苑', 1),('南苑', 7),('北苑', 5); sel ...

  5. BIO、NIO、AIO入门认识

    同步.异步.阻塞.非阻塞概念理解. 同步: 比如在执行某个逻辑业务,在没有得到结果之前一直处于等待阻塞状态,得到结果后才继续执行 异步: 比如在执行某个逻辑业务,在没有得到结果可以去干其他的事情,等待 ...

  6. 8 包含min函数的栈

    0 引言 题目:定义栈的数据结构,请在该类型中实现一个能够得到栈的最小元素的min函数.在该栈中,调用min.push及pop的时间复杂度都是O(). 1 抽象问题具体化 2 具体问题抽象分析 需要解 ...

  7. SpringCloud及其五大常用组件之Feign、Ribbon和Hystrix

    1.Feign 我们已经将Eureka和Zuul开发完毕,而且上面注册了两个微服务,现在我们实现两个微服务之间的调用. String baseUrl = "http://127.0.0.1: ...

  8. SDOI2018

    SD的题有点反人类啊... d1t1[SDOI2018]物理实验 感觉比较好想但不太好写,写了一半弃了 d1t2[SDOI2018]战略游戏 建出圆方树,每次建虚树,答案就是虚树上的原点个数减去询问的 ...

  9. HTML基本案列

    <html> <head> <!-- meta :告诉浏览器,如何翻译汉字 http-equiv :content-type 内容类型 详细内容有后面的值指定 conte ...

  10. js文件操作之——导出Excel (js-xlsx)

    前阵子跟server同学讨论一个Excel导出的需求,我说JS搞不定,需要server来做,被server同学强行打脸. 今天研究了下,尼玛,不光可以,还很强大了! 总结:经验是害人的,尤其是在发展迅 ...