原生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 相关文章推荐
对JavaScript的eval()中使用函数的进一步讨论
Jul 26 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
JavaScript传递变量: 值传递?引用传递?
Feb 22 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
JavaScript实现基于Cookie的存储类实例
Apr 10 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
100行代码实现vue表单校验功能(小白自编)
Nov 19 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
解决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教程 基本语法
2009/10/23 PHP
php延迟静态绑定实例分析
2015/02/08 PHP
php实现发送微信模板消息的方法
2015/03/07 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
javascript之大字符串的连接的StringBuffer 类
2007/05/08 Javascript
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
学习ExtJS table布局
2009/10/08 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
AngularJs directive详解及示例代码
2016/09/01 Javascript
Extjs表单输入框异步校验的插件实现方法
2017/03/20 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
Bootstrap-table自定义可编辑每页显示记录数
2018/09/07 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
微信小程序登陆注册功能的实现代码
2019/12/10 Javascript
Python 用户登录验证的小例子
2013/03/06 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
Python requests发送post请求的一些疑点
2018/05/20 Python
Python关于反射的实例代码分享
2020/02/20 Python
Python基于Webhook实现github自动化部署
2020/11/28 Python
canvas绘制文本内容自动换行的实现代码
2019/01/14 HTML / CSS
Mytheresa英国官网:拥有160多个奢侈品品牌
2016/10/09 全球购物
美国现代家具购物网站:LexMod
2019/01/09 全球购物
世界上最好的足球商店:Unisport
2019/03/02 全球购物
外语学院毕业生的自我鉴定
2013/11/28 职场文书
安全资料员岗位职责
2013/12/14 职场文书
职工运动会邀请函
2014/01/19 职场文书
私营公司诉讼代理委托书范本
2014/09/13 职场文书
敬老院活动感想
2015/08/07 职场文书
安全生产培训心得体会
2016/01/18 职场文书
六五普法心得体会2016
2016/01/21 职场文书
使用nginx配置访问wgcloud的方法
2021/06/26 Servers