java轮播_原生js一行代码实现简易轮播图

这是一个简易的js无限循环轮播图，只用了一行js代码就实现了无限循环，记录一下三目运算符的伟大！

Document

* {

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;

}

• 1
• 2
• 3
• 4
• 5
• 6

setInterval(()=>{

var wrap = document.querySelector('.wrap')

var left = parseInt(wrap.style.marginLeft)

wrap.style.marginLeft = left >= -2400 ? left - 600 + 'px' : '0px'

},2000)