輪播圖，是網站首頁中最為常見的一種圖檔切換特效，那麼今天就來分享一篇前端開發實戰當中經常使用到的實作無縫輪播圖效果的文章，希望對您有所幫助，歡迎留言探讨。
1、html結構布局：
<div id="wrap">
<ul class="pic">
<li>
<img src="images/1.png">
</li>
<li>
<img src="images/2.png">
</li>
<li>
<img src="images/3.png">
</li>
<li>
<img src="images/4.png">
</li>
<li>
<img src="images/5.png">
</li>
<li>
<img src="images/1.png">
</li>
</ul>
<ul class="tab">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="prev"> < </div>
<div class="next"> > </div>
</div>
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、實作效果：
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)