js無縫輪播效果實現，自動輪播
阿新 • • 發佈：2018-12-23
輪播圖，是網站首頁中最為常見的一種圖片切換特效，那麼今天就來分享一篇前端開發實戰當中經常使用到的實現無縫輪播圖效果的文章，希望對您有所幫助，歡迎留言探討。
1、html結構佈局：
<div id="wrap">
<ul class="pic">
<li>
<img src="images/1.png">
</li>
<li>
<img src="images/2.png">
< 2、css佈局樣式：
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
img {
vertical-align: top;
width: 640px;
height: 360px;
}
#wrap {
position: relative;
width: 640px;
height: 360px;
margin: 50px auto;
overflow: hidden;
}
#wrap .pic {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 1000%;
}
.pic li {
float: left;
}
.tab {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -100px;
width: 150px;
height: 30px;
padding-left: 10px;
background: rgba(0, 0, 0, .2);
border-radius: 15px;
transition: .5s;
transform: scale(.8);
}
.tab:hover {
background: rgba(0, 0, 0, .5);
transform: scale(1.2);
}
.tab li {
width: 20px;
height: 20px;
float: left;
background: #fff;
border-radius: 50%;
margin: 5px 10px 0 0;
opacity: .35;
cursor: pointer;
}
.tab li.on {
position: absolute;
top:0;
background: #f60;
opacity: 1;
z-index: 99;
}
#wrap>div {
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
background: rgba(0, 0, 0, .2);
text-align: center;
font-size: 18px;
line-height: 60px;
color: #fff;
cursor: pointer;
}
#wrap>div:hover {
background: rgba(0, 0, 0, .5);
}
.next {
right: 0;
}
</style>
3、js行為實現：
<script>
const oWrap = document.getElementById("wrap"),
oNext = document.getElementsByClassName("next")[0],
oPrev = document.getElementsByClassName("prev")[0],
oPic = document.getElementsByClassName("pic")[0],
aPicLi = document.querySelectorAll(".pic li"),
aTabLi = document.querySelectorAll(".tab li"),
aTabLiOn = document.querySelectorAll(".tab .on")[0],
imgW = 640;
let date = new Date(),
index = 0,
timer = null;
//右邊按鈕
oNext.onclick = () =>{//點選一次向左邊移動index增加值乘以圖片寬度
if(new Date() - date < 800) return;//兩次點選間隔小於800,就不動
date = new Date();
index++;
if(index === aPicLi.length-1){
Move(oPic,{left:-index*imgW},500,()=>{//最後一張圖片,也就是跟第一張圖片一模一樣的那一個在往左邊走動完的瞬間通過回撥函式,讓oPic回去,也就是真正的第一張圖片出來
oPic.style.left = 0;
index = 0;//回到第一個的下標
});
Move(aTabLiOn,{opacity:0},250,()=>{//在最後一個上面通過透明消失,在回撥函式裡面讓他在第一個上面出現
aTabLiOn.style.left = "10px";//瞬間回去
Move(aTabLiOn,{opacity:1},250);//同時opacity變為1出現
})
} else {
Move(oPic,{left:-index*imgW},500);//每點選一次向左走一個圖片的位置
Move(aTabLiOn,{left:index*30+10},500);//每點選一次改變小球的位置
}
}
//左邊按鈕
oPrev.onclick = () =>{//點選一次向左邊移動index增加值乘以圖片寬度
if(new Date() - date < 800) return;//兩次點選間隔小於800,就不動
date = new Date();
if(index === 0){//一上來就對第一個做判斷
oPic.style.left = -(aPicLi.length-1)*imgW + 'px';
index = aPicLi.length - 1;//把倒數第二張圖片,也是就是最後以上的圖片取出來,在通過index--獲取這個圖片的下標
Move(aTabLiOn,{opacity:0},250,()=>{//在最前面一個上面通過透明消失,在回撥函式裡面讓他在最後一個上面出現
aTabLiOn.style.left = (aTabLi.length - 2)*30 + 10+'px';//瞬間到最後面去,一共有6個球,但是和前面的距離只有四個球
Move(aTabLiOn,{opacity:1},250);//同時opacity變為1出現
})
}
index--;
if(index !== aTabLi.length - 2){
Move(aTabLiOn,{left:index*30+10},500);//每點選一次改變小球的位置
}
Move(oPic,{left:-index*imgW},500);
}
//按鈕迴圈
timer = setInterval(oNext.onclick,500);
for(let i=0;i<aTabLi.length;i++){//一開始第一個和第二個是重合的,所以這個長度是不能變的
aTabLi[i].onclick = () => {
if(i===0) return;//如果點選到下標為1的那個,也就是黃色球的,我們就不執行
Move(oPic,{left:-(i-1)*imgW},500);//圖片運動,這裡的i是從黃色小球那一個,也就是第一個開始的,所以我們這裡要減一
let num = Math.abs(index - i + 1);//黃色的小球是和第二個li重合的,我們點選的第二個其實是第三個,中間有一個間隔
if(num>1){
Move(aTabLiOn,{opacity:0},250,()=>{
aTabLiOn.style.left = (i-1)*30 + 10 + 'px';
Move(aTabLiOn,{opacity:1},250);
})
} else {
Move(aTabLiOn,{left:(i-1)*30+10},500);
}
index = i-1;//上面190行加了1,所以這裡需要減一下
}
}
oWrap.onmouseenter = ()=>{
clearInterval(timer);
}
oWrap.onmouseleave = ()=>{
timer = setInterval(oNext.onclick,500);
}
//運動時間
(function(){
//requestAnimationFrame相容寫法
var requestAnimationFrame = window.requestAnimationFrame || function(unSpeed){return setTimeout(unSpeed,1000/60);}
function Move(obj,json,time,callback){//json包括了屬性名,和值
//獲取初始值
var objCss = obj.currentStyle || getComputedStyle(obj);//獲取屬性
var startAttr = {};//儲存各個屬性值
var S = {}; //各個變化值parseFloat能獲取小數,去除單位值
for(var key in json){
startAttr[key] = parseFloat(objCss[key]) || 0;//儲存對應屬性的初始值
S[key] = json[key] - startAttr[key];//計算各個屬性需要的變化量
if(!S[key]){//S[key]為0的時候,是假,取反為真
delete S[key];
delete json[key];
}
}
//獲取初始時間
var startTime = new Date();
//動畫函式
function unSpeed(){
var proTime = (new Date() - startTime) / time;
proTime >= 1 ? proTime = 1 : requestAnimationFrame(unSpeed);
for(var key in json){
if(key.toLowerCase()==="opacity"){//判斷有沒有opacity屬性
var val = S[key]*proTime + startAttr[key];
obj.style[key] = val;
obj.style.filter = "alpha(opacity="+val*100+")";//IE相容opacity的寫法
} else {
obj.style[key] = S[key]*proTime + startAttr[key] + 'px';
}
}
if(proTime===1){
callback && callback.call(obj);
}
}
requestAnimationFrame(unSpeed);
}
window.Move = Move;
})();
</script>
3、實現效果：
