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

赞 (0)

相关推荐

  • 原生JS实现的轮播图功能详解

    原生JS实现的轮播图功能详解

    本文实例讲述了原生JS实现的轮播图功能.分享给大家供大家参考,具体如下: 一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2..prev存放向左的箭头,.next存放向右的箭头: 3.pointer意为指示器,存放下方的五个切换按钮,每个切换按钮用span来表示: 4..m-view,意为视窗,即每次看到图片的窗口,它存放以上所有的部件: (二)CS

  • JS使用tween.js动画库实现轮播图并且有切换功能

    效果图如下所示: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .wrap{ width: 500px; height: 300px; position: relative; overflow: hidden; } .box{ widt

  • js实现轮播图的完整代码

    js实现轮播图的完整代码

    今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->

  • 原生JS实现的简单轮播图功能【适合新手】

    原生JS实现的简单轮播图功能【适合新手】

    本文实例讲述了原生JS实现的简单轮播图功能.分享给大家供大家参考,具体如下: 经过几天的努力,终于攻克了这一难题,于是迫不及待的想要分享给大家,编写之前,我也看了不少其他博主的博客,大多是用偏移量写的,对新手来说,还是有些难以理解,虽然可能实现的需求不一样,但我想先从简入手,所以自己查阅资料,修改bug,终于完成.话不多说,上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q

  • js实现移动端轮播图

    本文实例为大家分享了js实现移动端轮播图的具体代码,供大家参考,具体内容如下 这是结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0&

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

    这是一个简易的js无限循环轮播图,只用了一行js代码就实现了无限循环,记录一下三目运算符的伟大! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l

  • 原生Js 实现的简单无缝滚动轮播图的示例代码

       简单无缝滚动轮播图存在很多漏洞,就是后期增加图片时会很不方便,需要改动的地方也很多,耦合性也很强,只适用于一部分程序,所以我们可以通过改动图片结构和计算折算点的方式,升级代码.       原简单的滚动轮播代码 <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &

  • 原生js和jQuery实现淡入淡出轮播效果

    本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码,分享给大家供大家参考,具体内容如下: 基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果. html代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>一个轮播&l

  • JavaScript实现简易轮播图最全代码解析（ES6面向对象）

    JavaScript实现简易轮播图最全代码解析（ES6面向对象）

    本文实例为大家分享了JavaScript实现简易轮播图的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES6轮播图</title> <script></script> <style> * { margin: 0; padding: 0; } .box { wi

  • JavaScript实现简易轮播图最全代码解析（ES5）

    JavaScript实现简易轮播图最全代码解析（ES5）

    本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码,供大家参考,具体内容如下 全部代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES5轮播图</title> <style> * {padding: 0;margin: 0;} #wrapper { position: relative; margin: 5

  • JavaScript实现简易轮播图最全代码解析(ES6面向对象)

    JavaScript实现简易轮播图最全代码解析(ES6面向对象)

    本文实例为大家分享了JavaScript实现简易轮播图的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES6轮播图</title> <script></script> <style> * { margin: 0; padding: 0; } .box { wi

  • JavaScript实现简易轮播图最全代码解析(ES5)

    JavaScript实现简易轮播图最全代码解析(ES5)

    本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码,供大家参考,具体内容如下 全部代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES5轮播图</title> <style> * {padding: 0;margin: 0;} #wrapper { position: relative; margin: 5

  • JS中Swiper的使用和轮播图效果

    Swiper是移动端的一款非常强大的触摸滑动插件,下面代码只展示一些常用的配置,具体可以查看官网api <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="swiper.min.cs

  • JS实现头条新闻的经典轮播图效果示例

    JS实现头条新闻的经典轮播图效果示例

    本文实例讲述了JS实现头条新闻的经典轮播图效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, m

  • js代码编写无缝轮播图

    本文实例为大家分享了js编写无缝轮播图的具体代码,供大家参考,具体内容如下 前言 这个是一个轮播图 提示: 请让最后一个img和第一个img是一张图片相同 且 li数目为img数目-1: 一.无缝轮播图 让第一张和最后一张相同 type:第一张和最后一张相同: 在最后一张向下一张切换时,立刻跳到第一张 然后向第二张正常切换 二.使用步骤 1.html代码 代码如下(示例): <div class="banner"> <div class="qh"&

随机推荐