JQuery 是現代網站開發中非常常用的 JavaScript 庫，極大的簡化了 JavaScript 的編寫。在很多網站開發的過程中，我們需經常實現圖片切換的效果，下面我們通過 JQuery 實現兩個圖片的切換。
<html>
<head>
<style>
#container{
width: 500px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
#img1{
width: 200px;
height: 200px;
margin-right: 50px;
}
#img2{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<img src="img1.jpg" alt="img1" id="img1">
<img src="img2.jpg" alt="img2" id="img2">
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
var index = 1;
setInterval(function(){
index = index == 1 ? 2 : 1;
$('#img1,#img2').eq(index-1).fadeIn(2000).siblings().fadeOut(2000);
}, 5000);
});
</script>
</body>
</html>上述代碼實現了兩個圖片的輪播效果，其中包括了 HTMl、CSS、JQuery 代碼。我們首先定義了一個包含兩個圖片的容器，使用 CSS 使它們水平居中，并且設置了圖片的大小。其中，“eq()”方法表示選取第一個或第二個圖片，用“fadeIn()”實現舊圖片漸隱漸顯出現新圖片，而“fadeOut()”則實現消失。
總結起來，JQuery 提供了非常優秀的框架和方法來實現網站的需求，非常適合做網站開發者。通過這個教程，我們能夠學會 JQuery 實現兩個圖片的切換效果。
下一篇css 圖片響應式布局