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=)