原生JS實現 輪播效果
阿新 • • 發佈：2019-01-30
<div id="playImages" class="play"> <ul class="big_pic"> <div class="prev"></div> <div class="next"></div> <a href="javascript:" class="mark_left"></a> <a href="javascript:" class="mark_right"></a> <div class="bg"></div> <li style="z-index: 1;"><img src="../Image/effectImages/Ps123Net_0006.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0007.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0008.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0009.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0010.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0011.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0012.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0013.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0014.jpg" alt=""/></li> </ul> <div class="small_pic"> <ul> <li style="alpha(opacity:100);opacity:1;"><img src="../Image/effectImages/Ps123Net_0006.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0007.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0008.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0009.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0010.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0011.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0012.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0013.jpg" alt=""/></li> <li><img src="../Image/effectImages/Ps123Net_0014.jpg" alt=""/></li> </ul> </div> </div>
body{background-color: #c0c0c0;} ul{list-style-type: none;padding: 0;margin: 0;} .play{width: 1000px;height:600px;margin: 50px auto;position: relative;background-color: #ffffff;} .mark_left{width:300px;height:378px;position:absolute;left:0;top:0;background-color: red;filter:alpha(opacity:0);opacity:0;z-index:3000;} .mark_right{width:300px;height:378px;position:absolute;left:300px;top:0;background-color: yellow;filter:alpha(opacity:0);opacity:0;z-index:3000;} .big_pic .prev{width:69px;height:69px;background:url(../Image/effectImages/icon.jpg) no-repeat -340px -106px;position:absolute;left:50px;top:160px;z-index: 3001;filter:alpha(opacity:0);opacity:0;cursor:pointer;border-radius:50%;} .big_pic .next{width:69px;height:69px;background:url(../Image/effectImages/icon.jpg) no-repeat -340px -197px;position:absolute;right:50px;top:160px;z-index: 3001;filter:alpha(opacity:0);opacity:0;cursor:pointer;border-radius:50%;} .big_pic {width: 600px;height:378px;margin: 0 auto;overflow:hidden;position:relative; left: 0;top: 30px;} .big_pic li{width:600px;height: 378px;position: absolute;left: 0;top: 0;overflow: hidden} .big_pic li img{width: 600px;height: 378px;} .small_pic{margin:0 auto;width:580px;height:90px;overflow:hidden;padding: 10px;position: relative;left:0;top:30px;background-color:#666666;} .small_pic ul{list-style-type:none;height: 90px;position: absolute;left: 0;top:0;padding: 10px 0 ;} .small_pic li{width: 137px;height: 90px;float:left;padding-left:10px;alpha(opacity:60);opacity:0.6;} .small_pic li img{width: 137px;height:90px;cursor: pointer;}
window.onload = function(){ var oDiv = document.getElementById('playImages'); var obtnPrve = getByClass(oDiv,'prev')[0]; var obtnNext = getByClass(oDiv,'next')[0]; var oMarkLeft = getByClass(oDiv,'mark_left')[0]; var oMarkRight = getByClass(oDiv,'mark_right')[0]; //1.先解決滑鼠移動到左右部分顯示箭頭的步驟 obtnPrve.onmouseover = oMarkLeft.onmouseover = function(){ startMove(obtnPrve,'opacity',100) }; obtnPrve.onmouseout = oMarkLeft.onmouseout = function(){ startMove(obtnPrve,'opacity',0) }; obtnNext.onmouseover = oMarkRight.onmouseover = function(){ startMove(obtnNext,'opacity',100) }; obtnNext.onmouseout = oMarkRight.onmouseout = function(){ startMove(obtnNext,'opacity',0) }; //大圖切換 var oDivSmall = getByClass(oDiv,'small_pic')[0]; var oUlSmall = oDivSmall.getElementsByTagName('ul')[0]; var oLiSmall = oDivSmall.getElementsByTagName('li'); var oUlBig = getByClass(oDiv,'big_pic')[0]; var oLiBig = oUlBig.getElementsByTagName('li'); var nowZIndex = 2; var now = 0; oUlSmall.style.width = oLiSmall.length * oLiSmall[0].offsetWidth + 'px'; for(var j=0;j<oLiSmall.length;j++){ oLiSmall[j].index = j; oLiSmall[j].onclick = function(){ if(this.index == now) return; now = this.index; tab(); }; oLiSmall[j].onmouseover = function(){ startMove(this,'opacity',100) }; oLiSmall[j].onmouseout = function(){ if(this.index != now){ startMove(this,'opacity',60) } } } function tab(){ oLiBig[now].style.zIndex = nowZIndex++; for(var i=0;i<oLiSmall.length;i++){ startMove(oLiSmall[i],'opacity',60) } startMove(oLiSmall[now],'opacity',100); oLiBig[now].style.height = 0; startMove(oLiBig[now],'height',378); if(now == 0){ startMove(oUlSmall,'left',0) }else if(now == oLiSmall.length-2){ startMove(oUlSmall,'left',-(now - 2)*oLiSmall[0].offsetWidth) } else if(now == oLiSmall.length-1){ startMove(oUlSmall,'left',-(now - 3)*oLiSmall[0].offsetWidth); }else{ startMove(oUlSmall,'left',-(now-1)*oLiSmall[0].offsetWidth); } } obtnPrve.onclick = function(){ now --; if(now == -1){ now = oLiSmall.length - 1; } tab(); }; obtnNext.onclick = function(){ now ++; if(now == oLiSmall.length){ now = 0; } tab(); } var timer = setInterval(obtnNext.onclick,2000); oDiv.onmouseover = function(){ clearInterval(timer) } oDiv.onmouseout = function(){ timer = setInterval(obtnNext.onclick,2000); } }; function getByClass(oParent,sClass){ var aEle = oParent.getElementsByTagName('*'); var aResult = []; for(var i=0;i<aEle.length;i++){ if(aEle[i].className == sClass){ aResult.push(aEle[i]); } } return aResult; }
function startMove(obj,attr,iTarget){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var cur =0;
//判斷屬性是否為透明度
if(attr == 'opacity'){
cur = Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur = parseInt(getStyle(obj,attr))
}
//得到速度並將速度去整
var speed = (iTarget - cur)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(cur == iTarget){
clearInterval(obj.timer)
}else{
if(attr == 'opacity'){
obj.style.filter = 'alpha(opacity:'+(cur+speed)+')';
obj.style.opacity = (cur + speed)/100;
}else{
obj.style[attr] =cur + speed +'px';
}
}
},30)
}
//getStyle 幫助獲取不在行間的樣式
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle;
}else{
return getComputedStyle(obj,false)[name]
}
}有什麼問題可以隨時留言哦！