参考：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. try-with-resources with JDBC

    I realize this was long ago answered but want to suggest an additional approach that avoids the nest ...

  2. 2019 年百度之星·程序设计大赛 - 初赛一 C. Mindis 离散化+dijkstra

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

  3. ci 连接myssql

    由于要将mssql 和 mysql 里面的数据进行对比,So. 配置:database.php $db['default']['hostname'] = '192.168.1.222'; $db['d ...

  4. Java 基础 - instanceof关键字

    instanceof 父类子类 结论: 子类 instanceof 父类 == true 父类 instanceof 子类 == false public class Test { public st ...

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

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

  6. python定时任务模块APScheduler

    一.简单任务 定义一个函数,然后定义一个scheduler类型,添加一个job,然后执行,就可以了 5秒整倍数,就执行这个函数 # coding:utf-8 from apscheduler.sche ...

  7. 好用的抓取dump的工具-ProcDump

    Procdump是一个轻量级的Sysinternal团队开发的命令行工具, 它的主要目的是监控应用程序的CPU异常动向, 并在此异常时生成crash dump文件, 供研发人员和管理员确定问题发生的原 ...

  8. System.Web.Mvc.HttpGetAttribute.cs

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

  9. http://www.narkii.com/club/forum-46-1.html 纳金学习论坛，主要是讨论一些unty3D方面的事情，技术栈比较前沿，

    http://www.narkii.com/club/forum-46-1.html  纳金学习论坛,主要是讨论一些unty3D方面的事情,技术栈比较前沿,

  10. PyCharm中批量查找及替换

    选中需要操作的字符 Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换 源自: PyCharm中批量查找及替换 - Ella_Wu - 博客 ...