原生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 相关文章推荐
让IE6支持min-width和max-width的方法
Jun 25 Javascript
javascript列表框操作函数集合汇总
Nov 28 Javascript
JS中如何实现点击a标签返回页面顶部的问题
Jan 19 Javascript
Vue 仿QQ左滑删除组件功能
Mar 12 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
vue登录注册实例详解
Sep 14 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
Vue的props父传子的示例代码
May 20 Javascript
全网小程序接口请求封装实例代码
Nov 06 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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
使用 eAccelerator加速PHP代码的方法
2007/09/30 PHP
PHP 地址栏信息的获取代码
2009/01/07 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
浅谈PHP中类和对象的相关函数
2017/04/26 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
[原创]PHP正则匹配中英文、数字及下划线的方法【用户名验证】
2017/08/01 PHP
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
js动态移动滚动条至底部示例代码
2014/04/24 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
2015/10/31 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
用jQuery实现优酷首页轮播图
2017/01/09 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
Vue 动态设置路由参数的案例分析
2018/04/24 Javascript
vue实现2048小游戏功能思路详解
2018/05/09 Javascript
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
vue数据响应式原理知识点总结
2020/02/16 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
pydev使用wxpython找不到路径的解决方法
2013/02/10 Python
python在非root权限下的安装方法
2018/01/23 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
Python中作用域的深入讲解
2018/12/10 Python
python 输出所有大小写字母的方法
2019/01/02 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
Python脚本去除文件的只读性操作
2020/03/05 Python
本科生学习总结的自我评价
2013/10/02 职场文书
ktv收银员岗位职责
2013/12/16 职场文书
旷课检讨书大全
2014/01/21 职场文书
单位创先争优活动方案
2014/01/26 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
四年级语文教学反思
2016/03/03 职场文书
VUE中的v-if与v-show区别介绍
2022/03/13 Vue.js
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers