这是一个简易的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一行代码实现简易轮播图的更多相关文章

  1. 原生js实现简单移动端轮播图

    最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...

  2. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  3. 用CSS代码编写简易轮播图

    废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...

  4. js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]

    前言:         本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽.         本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...

  5. 原生JS实现简易轮播图

    原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...

  6. JS封装动画框架,网易轮播图,旋转轮播图

    JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...

  7. JS原生带小白点轮播图

    咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...

  8. JS应用实例2：轮播图

    在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...

  9. jQuery实现简易轮播图的效果

    (图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...

随机推荐

  1. 异常处理（try catch throw）详解（C++）

    选择异常处理的编程方法的具体原因如下: 1.把错误处理和真正的工作分开来: 2.代码更易组织,更清晰,复杂的工作任务更容易实现: 3.毫无疑问,更安全了,不至于由于一些小的疏忽而使程序意外崩溃了: 4 ...

  2. pcre7.0在vc6.0编译

    (0)从http://gnuwin32.sourceforge.net/packages/pcre.htm  (pcre windows)下下载最新的windows平台源代码pcre-7.0-src. ...

  3. Win7查看本地是否安装JDK及安装路径的方法

    工具/原料   win7 方法/步骤   1 开始->点击运行,输入:cmd 2 然后在命令提示符中,输入:java -version  假如看到有版本提示那么安装成功 3 假如忘记了java ...

  4. 【stl学习笔记】vector

    vector是定义于namespace std内的template: namespace std { template<class T, class Allocator = allocator& ...

  5. ExtJS学习-----------Ext.Object，ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  6. Android KK后为何工厂模式下无法adb 无法重新启动机器 ？

    前言          欢迎大家我分享和推荐好用的代码段~~ 声明          欢迎转载,但请保留文章原始出处:          CSDN:http://www.csdn.net        ...

  7. centos+nginx+php-fpm+php include fastcgi_params php页面能訪问但空白,被fastcgi_params与fastcgi.conf害慘了

    今天在centos上折腾这块是发现老是訪问页面时,浏览器中提示是200 ok.且訪问html后缀却是正常出现内容. 可是訪问php后缀却返回空白页面,同一时候查看全部的log没有发现不论什么出错信息; ...

  8. JNI返回复杂对象之中的一个

    需求: 首先说需求.近期接手一个项目.要在底层解析二进制数据,数据结构比較负责,因为server是c++server,加之開始没有考虑到移动端开发,所以协议有点扯蛋.大体是这种,一个数据包里面是map ...

  9. Linux_C——动态库，静态库

    /usr/lib /lib:标准系统库文件          库是一组预先编译好的函数的集合,这些函数都是按照可重用的原则编写的.它们通常有一组相互关联的函数组成以          执行某项常见的任 ...

  10. 【iOS系列】-xib封装使用

    [iOS系列]-xib封装使用 Xib文件可以用来描述某一块局部的UI界面 Xib文件的加载 修改xib文件的大小size(Freeform) 第一: NSArray *objs = [[NSBund ...