VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 原生js通过一行代码实现简易轮播图

    建站教程 2019年11月09日 关键词:,,,

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大!

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    * {
    margin: 0;
    padding: 0;
    }
    ul,li{
    list-style: none;
    }
    .container {
    width: 600px;
    height: 400px;
    margin: 100px auto;
    box-shadow: 0 0 5px green;
    overflow: hidden;
    }
    .container .wrap {
    width: 4200px;
    height: 400px;
    transition: 1s;
    overflow: hidden;
    }
    .container .wrap li {
    float: left;
    width: 600px;
    height: 400px;
    box-shadow: 0 0 1px 1px #f60;
    line-height: 400px;
    text-align: center;
    font-size: 50px;
    }
    </style>
    </head>
    <body>
    <div class="container">
    <ul class="wrap" style="margin-left:0px;">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
    </div>
    <script>
    setInterval(()=>{
    var wrap = document.querySelector('.wrap')
    var left = parseInt(wrap.style.marginLeft)
    wrap.style.marginLeft = left >= -2400 ? left - 600 + 'px' : '0px'
    },2000)
    </script>
    </body>
    </html>

    总结

    以上所述是小编给大家介绍的原生js通过一行代码实现简易轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!

    您可能感兴趣的文章:

    • js实现移动端轮播图
    • js实现轮播图的完整代码
    • 原生JS实现的简单轮播图功能【适合新手】
    • 原生JS实现的轮播图功能详解
    • JS使用tween.js动画库实现轮播图并且有切换功能

    广而告之:
    热门推荐:
    解决Mac OS X 自带PHP环境gd库扩展缺少freetype的问题

    验证码真的出来喽! curl -s http://php-osx.liip.ch/install.sh | bash -s 7.0 以上这篇解决Mac OS X 自带PHP环境gd库扩展缺少freetype的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持北冥有鱼。

    php好代码风格的阶段性总结

    本文总结了php好代码的风格,分享给大家供大家参考,具体如下: 1、避免使用魔数 if($age<18){ } 这个18不太明白为什么要这样子。 可以将28定义在一个变量里面,这个变量命名表明了这个值的含义 $adult_age = 18;//成年的分界点年龄 if($age<$adult_age){ } 2、函···

    thinkphp5.1框架容器与依赖注入实例分析

    本文实例讲述了thinkphp5.1框架容器与依赖注入。分享给大家供大家参考,具体如下: 容器----/thinkphp/library/think/Container.php 依赖注入:将对象类型的数据,以参数的方式传到方法中(解决向类中的方法传对象的问题) 绑定一个类到容器: public function bindClass() { ···

    PHP实现在数据库百万条数据中随机获取20条记录的方法

    本文实例讲述了PHP实现在数据库百万条数据中随机获取20条记录的方法。分享给大家供大家参考,具体如下: 额,为什么要写这个? 在去某个公司面试时,让写个算法出来,当时就蒙了,我开发过程中用到算法的吗?又不是大数据开发,分析。 今天偶然想起来一个坑爹数据,如:PHP取百···

    PHP CodeIgniter框架的工作原理研究

    CodeIgniter(以下简称CI,官网以及中国站)是一个流行的PHP框架,小巧但功能强大,简洁轻量同时拥有很好的扩展性,在国内也比较受欢迎。另一方面,CI却没有与时俱进,并不支持PHP5.3之后的一些特性,导致它相对更适合较老一些的项目。虽然如此,CI仍是一个优秀的框架,而且它···

    ThinkPHP连接数据库的方式汇总

    本文实例汇总了ThinkPHP连接数据库的几种常用方式。分享给大家供大家参考。具体如下: ThinkPHP内置了抽象数据库访问层,把不同的数据库操作封装起来,我们只需要使用公共的Db类进行操作,而无需针对不同的数据库写不同的代码和底层实现,Db类会自动调用相应的数据库适配器来处理,···

    thinkPHP数据查询常用方法总结【select,find,getField,query】

    本文实例讲述了thinkPHP数据查询常用方法。分享给大家供大家参考,具体如下: thinkphp已经封装好了常用的查询方法,且都比较实用,对于不常用的查询框架也保留了原始查询方法query。 $Model = new Model() // 实例化一个model对象 没有对应任何数据表 $Model->query("sele···

    微信小程序websocket实现即时聊天功能

    今天给大家分享一下本人做小程序使用websocket的一点小经验,希望对大家有所帮助。 使用之前肯定首先要了解一下websocket是什么,简单来讲websocket就是客户端与服务器之间专门建立的一条特殊通道,请求只需要请求一次,而且还可以从通道实时获取服务器数据,非常适合应用到实···

    在Windows XP下安装Apache+MySQL+PHP环境

    在整个wamp环境搭建中,本质的工作如下: 1,配置系统对php中dll文件能默认处于调用状态。 在windos下,对dll文件系统默认处于调用状态的,有两种采用的方式。 第一种是:把需要调用dll文件复制到C:\windows\ system32\(如果是Windows 2000操作系统,则为C:\WINNT\ system32\···

    深入理解PHP中的static和yield关键字

    前言 本文主要给大家介绍了关于PHP中static和yield关键字的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。 先来说说 static 关键字。本篇只讲静态方法的使用与后期绑定的知识点。 static 什么时候用来修饰方法 static 关键字大家都知道是用来修···