原生js通过一行代码实现简易轮播图


Posted in Javascript onJune 05, 2019

这是一个简易的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通过一行代码实现简易轮播图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
再说AutoComplete自动补全之实现原理
Nov 05 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
Aug 09 Javascript
两种JS实现屏蔽鼠标右键的方法
Aug 20 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
Dec 17 Javascript
JavaScript制作简易计算器(不用eval)
Feb 05 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
vue按需加载实例详解
Sep 06 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 #Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 #Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 #Javascript
优雅的处理vue项目异常实战记录
Jun 05 #Javascript
原生JS使用Canvas实现拖拽式绘图功能
Jun 05 #Javascript
Node.js 路由的实现方法
Jun 05 #Javascript
JS实现动态添加外部js、css到head标签的方法
Jun 05 #Javascript
You might like
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
php 函数使用方法与函数定义方法
2010/05/09 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
PHP给前端返回一个JSON对象的实例讲解
2018/05/31 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
2013/02/02 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
Three.js如何用轨迹球插件(trackball)增加对模型的交互功能详解
2017/09/25 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue多层嵌套路由实例分析
2019/03/19 Javascript
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
vue指令做滚动加载和监听等
2019/05/26 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python异步任务队列示例
2014/04/01 Python
python登录并爬取淘宝信息代码示例
2017/12/09 Python
python如何让类支持比较运算
2018/03/20 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python 获取一个值在某个区间的指定倍数的值方法
2018/11/12 Python
python取余运算符知识点详解
2019/06/27 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python读取JSON数据操作实例解析
2020/05/18 Python
纯CSS3代码实现switch滑动开关按钮效果
2016/08/30 HTML / CSS
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
小学运动会入场口号
2015/12/24 职场文书
2017大学生寒假社会实践心得体会
2016/01/14 职场文书
redis cluster支持pipeline的实现思路
2021/06/23 Redis
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Apache Pulsar集群搭建部署详细过程
2022/02/12 Servers
使用python绘制分组对比柱状图
2022/04/21 Python