原生js一行代码实现简易轮播图
这是一个简易的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一行代码实现简易轮播图的更多相关文章
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 原生js实现一个简单的轮播图
想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...
- 用CSS代码编写简易轮播图
废话不多说,直接上代码 <!doctype html> <html> <head> <title></title> <meta cha ...
- js 实现淘宝无缝轮播图效果，可更改配置参数 带完整版解析代码[slider.js]
前言: 本人纯小白一个,有很多地方理解的没有各位大牛那么透彻,如有错误,请各位大牛指出斧正!小弟感激不尽. 本篇文章为您分析一下原生JS写淘宝无缝轮播图效果 需求分析: ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架 添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
- JS原生带小白点轮播图
咱们刚刚说了js原生轮播图,现在给他加上可以随着一起走动的小圆点吧! css代码: *{ margin:0px; padding: 0px; } ul{ width: 2500px; height: ...
- JS应用实例2：轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
- jQuery实现简易轮播图的效果
(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue an ...
随机推荐
- POJ 3013 【需要一点点思维...】【乘法分配率】
题意: (这题明显感觉自己是英语渣) 给n个点从1到n标号,下面一行是每个点的权,另外给出m条边,下面是每条边的信息,两个端点+权值,边是无向边.你的任务是选出一些边,使这个图变成一棵树.这棵树的花费 ...
- 标准格式包含: 私有属性 无参构造 有参构造 setter 和getter 需求中的方法 需求一： 员工类Employee 属性：姓名name,工号id,工资salary 行为：显示所有成员信息的方法show() 需求二： 动物类Animal 属性:姓名name,年龄age 行为:吃饭
// 员工类 public class Employee { private String name; private int id; private double salary; public ...
- Java日志框架-logback配置文件多环境日志配置（开发、测试、生产）（原始解决方法）
说明:这种方式应该算是最通用的,原理是通过判断标签实现. <!-- if-then form --> <if condition="some conditional exp ...
- SpringMVC get请求中文乱码
针对GET请求的编码问题,则需要改tomcat的server.xml配置文件,如下: 原 <Connector connectionTimeout="20000" port= ...
- 【APUE】【转】守护进程编写
http://blog.csdn.net/zg_hover/article/details/2553321 守护进程(Daemon)是运行在后台的一种特殊进程.它独立于控制终端并且周期性地执行某种任务 ...
- win8 metro 自己写摄像头录像项目
这是要求不适用CameraCaptureUI等使用系统自带的 camera UI界面.要求我们自己写调用摄像头摄像的方法,如今我把我的程序贴下: UI界面的程序: <Page x:Class= ...
- 微信小程序之 Index（仿淘宝分类入口）
1.逻辑层 index.js //index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { menu: { imgU ...
- android JNI 资料大全
AndroidJNI 通过C++调用JAVA 1. JNIEnv对象 对于本地函数 JNIEXPORT void JNICALL Java_video1_TestNative_sayHel ...
- Android之弹出多级菜单
使用布局文件创建菜单:(多级菜单) 在res下创建目录menu(假设已经有啦就不用再创建了) 在该menu目录下创建XML文件这里我把文件名称命名为menu 在创建的menu.XML文件里 写入: & ...
- 针对OpenSSL吐嘈的吐嘈-如此唱反调
前些天写了一篇<令人作呕的OpenSSL>,顿时引来了大量的恶评.令我非常尴尬,同一时候也认为悲哀. 假设说you can you up之类的,我认为起码这人看出了我的本意,仅仅是怀疑我的 ...