原生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)站的支持！
相關(guān)文章
JavaScript性能優(yōu)化之小知識(shí)總結(jié)
JavaScript的性能問(wèn)題不容小覷，這就需要我們開(kāi)發(fā)人員在編寫(xiě)JavaScript程序時(shí)多注意一些細(xì)節(jié)，本文給大家介紹javascript性能優(yōu)化之小知識(shí)總結(jié)，需要的朋友可以參考下2015-11-11
利用JS動(dòng)態(tài)生成隔行換色HTML表格的兩種方法
這篇文章主要介紹了利用JS動(dòng)態(tài)生成隔行換色HTML表格的兩種方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
深入理解javascript函數(shù)參數(shù)與閉包
函數(shù)是javascript的一等對(duì)象，想要學(xué)好javascript，就必須深刻理解函數(shù)。本文對(duì)javascript函數(shù)參數(shù)與閉包進(jìn)行詳細(xì)分析介紹。需要的朋友一起來(lái)看下吧2016-12-12
js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)
在同學(xué)們使用某些網(wǎng)站的新版本頁(yè)面的時(shí)候，經(jīng)常會(huì)出現(xiàn)一個(gè)類似于新手引導(dǎo)一樣的效果，本文主要介紹了js頁(yè)面引導(dǎo)頁(yè)的實(shí)現(xiàn)思路總結(jié)，感興趣的可以了解一下2023-04-04
這篇文章主要介紹了var，let，const異同點(diǎn),文中較詳細(xì)的給大家介紹了let和const的相同點(diǎn)和不同點(diǎn)，需要的朋友可以參考下2018-08-08
js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法
這篇文章主要介紹了js鼠標(biāo)滑過(guò)圖片震動(dòng)特效的方法,涉及onMouseOver事件及圖片操作的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
這篇文章主要為大家詳細(xì)介紹了js前端導(dǎo)出Excel的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序用canvas實(shí)現(xiàn)電子簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
js字符串轉(zhuǎn)換成xml對(duì)象并使用技巧解讀
在js中有方法可以將字符串轉(zhuǎn)化為xml對(duì)象，感興趣的朋友可以參考下面的代碼片段，希望對(duì)你有所幫助2013-04-04
這篇文章主要介紹了axios請(qǐng)求參數(shù)的三種方式,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07