Javascript幻燈片是網頁制作中常用的一種技術，它可以使網頁更加生動有趣，吸引用戶的眼球。今天我們就來一起學習一下Javascript幻燈片的代碼。
首先我們需要清楚的了解一個幻燈片的組成部分，一般包括一個容器div，多個圖片img和一個導航欄div。我們可以通過設置容器的樣式來控制幻燈片的大小和位置，通過設置圖片的樣式來控制圖片的位置和大小，通過設置導航欄的樣式來控制導航欄的位置和樣式。下面是一個簡單的代碼示例：
<!DOCTYPE html>
<html>
<head>
<style>
#container{
width:800px;
height:500px;
margin:0 auto;
position:relative;
}
#pic{
width:800px;
height:500px;
position:absolute;
}
#nav{
width:800px;
height:50px;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="container">
<div id="pic">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
<div id="nav">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>在上面的代碼中，我們設置了一個寬度為800px，高度為500px的容器div，并設置了相對定位。然后在容器div中，我們添加了一個寬度和高度與容器相同的圖片div，同時設置了絕對定位。我們在圖片div中添加了三個圖片，分別為img1.jpg、img2.jpg和img3.jpg。我們還添加了一個寬度為800px，高度為50px，位于容器div底部的導航欄div，同時在導航欄div中添加了三個空白span標簽。
下面我們就來編寫Javascript代碼來實現幻燈片的滾動效果。我們通過Javascript來控制圖片的切換和導航欄的激活狀態。具體代碼如下：<!DOCTYPE html>
<html>
<head>
<style>
#container{
width:800px;
height:500px;
margin:0 auto;
position:relative;
}
#pic{
width:800px;
height:500px;
position:absolute;
}
#nav{
width:800px;
height:50px;
position:absolute;
bottom:0;
}
#nav span{
display:inline-block;
width:20px;
height:20px;
margin-right:10px;
background-color:#EEE;
border-radius:50%;
cursor:pointer;
}
#nav span.active{
background-color:#F00;
}
</style>
</head>
<body>
<div id="container">
<div id="pic">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
<div id="nav">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
var index = 0;//當前圖片的索引
var timer;//定時器
//1、自動輪播
function autoPlay(){
timer = setInterval(function(){
index++;
if(index>2){
index = 0;
}
changePic(index);
},3000);
}
autoPlay();
//2、切換圖片和導航欄
function changePic(index){
//2.1 切換圖片
var pic = document.getElementById("pic");
var left = -index * 800;
pic.style.left = left + "px";
//2.2 切換導航欄
var nav = document.getElementById("nav");
var spans = nav.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].className = "";
}
spans[index].className = "active";
}
//3、鼠標懸停和離開
var container = document.getElementById("container");
container.onmouseover = function(){
clearInterval(timer);
}
container.onmouseout = function(){
autoPlay();
}
//4、點擊導航欄
var spans = document.getElementById("nav").getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].index = i;//緩存當前span的索引值
spans[i].onclick = function(){
index = this.index;
changePic(index);
}
}
</script>
</body>
</html>在上面的代碼中，我們通過Javascript編寫了四個函數，分別為autoPlay、changePic、onmouseover和onmouseout。autoPlay函數用于控制幻燈片的自動輪播，changePic函數用于控制圖片的切換和導航欄的激活狀態，onmouseover和onmouseout用于鼠標懸停和離開事件的控制。我們還在導航欄span標簽中添加了一個index屬性，用于緩存當前span的索引值，這樣在點擊導航欄時就可以直接使用該屬性來獲取對應的索引值。
綜上所述，Javascript幻燈片的代碼實現并不復雜，只需要掌握好組成部分和所需函數即可。通過舉一反三，我們還可以根據需求來添加一些其他的效果，比如過渡效果、縮放效果等。愿大家在學習中能有所收獲！