快捷導(dǎo)航

原生js通過(guò)一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖

更新時(shí)間：2019年06月05日 16:08:28 作者：奎哥折騰記

這篇文章主要介紹了原生js一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下

這是一個(gè)簡(jiǎn)易的js無(wú)限循環(huán)輪播圖，只用了一行js代碼就實(shí)現(xiàn)了無(wú)限循環(huán)，記錄一下三目運(yùn)算符的偉大！

<!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>

總結(jié)

以上所述是小編給大家介紹的原生js通過(guò)一行代碼實(shí)現(xiàn)簡(jiǎn)易輪播圖，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

js
輪播圖

相關(guān)文章

動(dòng)態(tài)生成的IFRAME，設(shè)置SRC時(shí)的問(wèn)題解決分析
動(dòng)態(tài)生成的IFRAME，設(shè)置SRC時(shí)的，不同位置帶來(lái)的影響。以下所說(shuō)的是在IE7下運(yùn)行的。IE6下也是同樣。在這個(gè)blog中，直接點(diǎn)擊運(yùn)行代碼，和把下面代碼保存到為網(wǎng)頁(yè)在運(yùn)行（以本地文件或域名訪問(wèn)），效果不一樣。先看例子：
2008-04-04
javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)
這篇文章介紹了javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)方法總結(jié)，有需要的朋友可以參考一下
2013-08-08
基于 Immutable.js 實(shí)現(xiàn)撤銷重做功能的實(shí)例代碼
這篇文章主要介紹了基于 Immutable.js 實(shí)現(xiàn)撤銷重做功能及一些需要注意的地方,需要的朋友可以參考下
2018-03-03
excel操作之Add Data to a Spreadsheet Cell
excel操作之Add Data to a Spreadsheet Cell...
2007-06-06
javascript將ip地址第四段用星號(hào)代替的兩種方法
javascript將ip地址第四段用星號(hào)代替的方法，需要的朋友可以參考下。
2010-03-03
JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總
這篇文章主要介紹了JS獲取客戶端IP地址、MAC和主機(jī)名的7個(gè)方法匯總,JS本身是不支持獲取IP地址等信息的,本文通過(guò)其它方法實(shí)現(xiàn),需要的朋友可以參考下
2014-07-07
一個(gè)不用onmouseup的拖動(dòng)函數(shù)
一個(gè)不用onmouseup的拖動(dòng)函數(shù)...
2007-05-05
js實(shí)現(xiàn)百度登錄框鼠標(biāo)拖拽效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)百度登錄框鼠標(biāo)拖拽效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
Vue3中使用typescript封裝axios的實(shí)例詳解
這篇文章主要介紹了使用typescript封裝axios的實(shí)例代碼，為了方便，在vue3的配置里面按需加載element-plus，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下
2021-10-10
JS使用setInterval計(jì)時(shí)器實(shí)現(xiàn)挑戰(zhàn)10秒
這篇文章主要為大家詳細(xì)介紹了JS使用setInterval計(jì)時(shí)器實(shí)現(xiàn)挑戰(zhàn)10秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-11-11