JavaScript简单实现无缝轮播图
主要技术点在第四张切换到起一张的时候。
加入settimeout定时器，时间设置为0。设置为0，看似没有必要，实质上settimeout会把里面的代码放到队列当中，只有其他的代码执行完成之后才会执行里面的代码。就不会导致渲染过快而出现过渡切换的效果。
lists = document.getElementsByClassName('list')[0];
divs = document.getElementsByClassName('div');
var movePx = 0;
var timer = 0;
window.onload = function(){//初始化样式和开始移动
lists.style.transitionDuration = '.5s';
timer = setInterval(function(){
movePx -= 500;
move()
},1000)
}
function move(){//移动
if(movePx<-2000){//右溢出时的判断
lists.style.transitionDuration = '0s';
movePx = 0;
setTimeout(function(){
movePx-=500
lists.style.transform='translate3d('+(movePx)+'px,0,0)'
lists.style.transitionDuration = '.5s';
for(var i = 0 ;i<divs.length-2;i++){
divs[i].className = 'div'
}
divs[movePx/-500].className = 'div bgc'
},0)
}
if(movePx>0){//左溢出时的判断
lists.style.transitionDuration = '0s';
movePx = -2000;
setTimeout(function(){
lists.style.transitionDuration = '.5s';
movePx+=500
lists.style.transform='translate3d('+(movePx)+'px,0,0)'
for(var i = 0 ;i<divs.length-2;i++){
divs[i].className = 'div'
}
divs[movePx/-500].className = 'div bgc'
},0)
}
lists.style.transform='translate3d('+movePx+'px,0,0)';
//按钮的样式
for(var i = 0 ;i<divs.length-2;i++){
divs[i].className = 'div'
}
if(movePx/-500>=4){
divs[0].className = 'div bgc'
}else if(movePx/-500 == 1){
divs[1].className = 'div bgc'
}else{
divs[movePx/-500].className = 'div bgc'
}
}
//鼠标的移入和移出
for(var i=0;i<divs.length;i++){
lists.onmouseover = function(){
clearInterval(timer)
}
divs[i].onmouseover = function(){
clearInterval(timer)
}
lists.onmouseleave = function(){
window.onload()
}
divs[i].onmouseleave = function(){
window.onload()
}
}
//点击数字切换
for(let i=0; i<4;i++){
divs[i].onclick = function(){
movePx = i*(-500);
console.log(movePx)
move()
}
}
//下一张
divs[5].onclick = function(){
movePx-=500;
move()
}
//上一张
divs[4].onclick = function(){
movePx+=500;
move()
}
.wrap{
width:500px;
height:320px;
position:relative;
margin:50px auto;
overflow:hidden;
}
ul,li{
margin:0;
padding:0;
list-style:none;
}
img{
vertical-align: top;
border:none;
}
.list{
width:500%;
height: 320px;
/* animation: move 10s linear infinite; */
transition-property : all;
}
.list li{
float:left;
width:500px;
height:320px;
}
.list img{
width:100%;
height:100%;
}
.div {
width: 30px;
height: 30px;
background-color: rgba(252, 116, 116,.5);
margin: 0 10px;
cursor: pointer;
float: left;
line-height: 30px;
text-align: center;
color: antiquewhite;
}
.bgc {
background-color: rgba(26, 122, 206,0.5);
}
.bottom {
position: absolute;
bottom: 0;
}
.left {
position: absolute;
left: 0;
top: 45%;
width: 30px;
height: 30px;
background-color: rgba(204, 204, 204,.5);
}
.right {
position: absolute;
right: 0;
top: 45%;
width: 30px;
height: 30px;
background-color: rgba(204, 204, 204,.5);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./css/css.css">
<title>轮播图</title>
</head>
<body>
<div class="wrap">
<ul class="list">
<li><img src="img/1.jpg" alt=""/></li>
<li><img src="img/2.jpg" alt=""/></li>
<li><img src="img/3.jpg" alt=""/></li>
<li><img src="img/4.jpg" alt=""/></li>
<li><img src="img/1.jpg" alt=""/></li>
</ul>
<div class="bottom">
<div class="div bgc">1</div>
<div class="div">2</div>
<div class="div">3</div>
<div class="div">4</div>
</div>
<div class="div left"><</div>
<div class="div right">></div>
</div>
<script src="./js/js.js"></script>
</body>
</html>
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)