Jquery和純JS實現輪播圖(二)--淡入淡出切換式
阿新 • • 發佈:2019-01-30
之前有寫過一篇輪播圖,是左右切換式的,可以參考 Jquery和純JS實現輪播圖(一)–左右切換式
今天分享一下淡入淡出式的輪播圖,同樣也是用純js和Jquery兩種方法來實現:
JQUERY實現
HTML結構:
<div id="ads">
<img src="./images/img1.jpg" alt="" class="show" />
<img src="./images/img2.jpg" alt="" />
<img src="./images/img3.jpg" alt="" />
<img src="./images/img4.jpg" alt="" />
<img src="./images/img5.jpg" alt="" />
<img src="./images/img6.jpg" alt="" />
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li >
</ul>
</div>
CSS程式碼:
ul{ list-style: none; }
*{ margin: 0;padding: 0; }
#ads{
width: 590px; height: 250px;
border: 15px solid #999;
margin: 20px auto;
position: relative;
}
#ads img{
width: 100%; height: 100%;
position: absolute;
left: 0; top: 0;
display: none ;
}
#ads img.show{ display: block; }
#ads ul{
position: absolute;
bottom: 10px; left: 240px;
}
#ads ul li{
width: 12px; height: 12px;
float: left;
background: rgba(255,255,255,0.7);
margin-right: 8px;
border-radius: 50%;
cursor: pointer;
}
#ads ul li.active{ background: orange; }
JS程式碼:
$(function(){
var timer = null;
var cur = 0;
var len = $("#ads li").length;
//滑鼠滑過容器停止播放
$("#ads").hover(function(){
clearInterval(timer);
},function(){
showImg();
});
// 遍歷所有圓點導航實現劃過切換至對應的圖片
$("#ads li").click(function(){
clearInterval(timer);
cur = $(this).index();
$(this).addClass("active").siblings().removeClass("active");
$("#ads img").eq(cur).fadeIn(200).siblings("img").fadeOut(200);
});
//定義圖片切換函式
function showImg(){
timer = setInterval(function(){
cur++;
if( cur>=len ){ cur=0; }
$("#ads img").eq( cur ).fadeIn(200).siblings("img").fadeOut(200);
$("#ads li ").eq( cur ).addClass("active").siblings().removeClass("active");
},1000);
}
showImg();
});
純JS實現
html程式碼同上;
CSS程式碼:
ul{ list-style: none; }
*{ margin: 0;padding: 0; }
#ads{
width: 590px; height: 250px;
border: 15px solid #999;
margin: 20px auto;
position: relative;
}
#ads img{
width: 100%; height: 100%;
position: absolute;
left: 0; top: 0;
opacity: 0;
animation-timing-function: linear;
animation-duration:0.5s;
animation-fill-mode:forwards;
}
#ads img.show{
animation-name: show;
}
#ads img.unshow{
animation-name: disapper;
}
#ads ul{
position: absolute;
bottom: 10px; left: 240px;
}
#ads ul li{
width: 12px; height: 12px;
float: left;
background: rgba(255,255,255,0.7);
margin-right: 8px;
border-radius: 50%;
cursor: pointer;
}
#ads ul li.active{ background: orange; }
@keyframes show{
from{opacity;}
to{opacity:1;}
}
@keyframes disappear{
from{opacity:1;}
to{opacity:0;}
}
JS程式碼:
window.onload = function(){
var ads = document.getElementById("ads");
var imgs = ads.getElementsByTagName("img");
var lits = ads.getElementsByTagName("li");
var timer = null;
var cur = 0;
var len = lits.length;
// 定義並呼叫自動播放函式
timer = setInterval( autoPlay,1000 );
//滑鼠滑過容器停止播放
ads.onmouseover = function(){
clearInterval( timer );
}
// 滑鼠離開容器時繼續播放下一張
ads.onmouseout = function(){
timer = setInterval( autoPlay,1000 );
}
// 遍歷所有圓點導航實現劃過切換至對應的圖片
for( var i =0; i<len; i++ ){
(function(j){
lits[j].onclick = function(){
changePic(j);
cur = j;
}
})(i);
}
function autoPlay(){
cur++;
if( cur>=len ){ cur = 0 }
changePic( cur );
}
// 定義圖片切換函式
function changePic( curIndex ){
for( var i= 0;i<len;i++ ){
imgs[i].className = "unshow";
lits[i].className="";
}
imgs[curIndex].className = "show";
lits[curIndex].className = "active";
}
}