原生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函数的重载
Sep 22 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
Vue 组件封装 并使用 NPM 发布的教程
Sep 30 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
Mar 01 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
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
PHP实现设计模式中的抽象工厂模式详解
2014/10/11 PHP
linux下实现定时执行php脚本
2015/02/13 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
JavaScript使用技巧精萃[代码非常实用]
2008/11/21 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
2012/12/27 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
js实现常用排序算法
2016/08/09 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
postman+json+springmvc测试批量添加实例
2018/03/31 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
解读Django框架中的低层次缓存API
2015/07/24 Python
Python实现Dijkstra算法
2018/10/17 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
详解python深浅拷贝区别
2019/06/24 Python
python实现的爬取电影下载链接功能示例
2019/08/26 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
python 实现表情识别
2020/11/21 Python
Python安装Bs4的多种方法
2020/11/28 Python
python Matplotlib基础--如何添加文本和标注
2021/01/26 Python
介绍一下grep命令的使用
2012/06/28 面试题
给面试官的感谢信
2014/02/01 职场文书
销售个人求职信范文
2014/04/28 职场文书
领导班子对照检查材料
2014/09/22 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
毕业论文致谢词
2015/05/14 职场文书
关于python pygame游戏进行声音添加的技巧
2021/10/24 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js
清空 Oracle 安装记录并重新安装
2022/04/26 Oracle