幾種都是比較簡單的寫法，主要是為了給自己留個記錄，怕以後忘記。。。。 第一種：想法是把想要顯示的文字和圖片分別放入數組，然後根據num的大小讓數組array(num)的第num個顯示在div中。 第二種：通過將一排圖片依次放入div中，然後只顯示一張圖片的div的大小，其餘全部隱藏，通過左右偏移量d ...
幾種都是比較簡單的寫法，主要是為了給自己留個記錄，怕以後忘記。。。。
第一種：想法是把想要顯示的文字和圖片分別放入數組，然後根據num的大小讓數組array(num)的第num個顯示在div中。
第二種：通過將一排圖片依次放入div中，然後只顯示一張圖片的div的大小，其餘全部隱藏，通過左右偏移量div.style.left來進行圖片的左右移動，本來想另外在寫的，但是發現實在是太像了，所以只簡略描述
第三種：沒自己寫過，和第一種類似，把所有圖片疊加放在div里，通過num控製圖片的顯示隱藏，第一種是num是什麼，圖片就是第num張，沒有全部放出去，這種就是全部都放上來，但是用戶只能看到的是顯示的那張圖片，或者是透明度為1的那張
隨便擺的樣式 意思意思就好
依次下來是一個大框，數字，左右按鈕，圖片，4個小按鈕，其實這個按鈕數量也是可以js根據圖片數量生成的，我沒寫。。
<div class="imgContent" id='imgContent'> <a id="numx"></a> <strong id="prev" class="prev"><</strong> <strong id="next" class="next">></strong> <img src="" id="imgChange"/> <div class="buttons"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </div><script type="text/javascript"> //定義了幾個控制項的id和變數 var numx = document.getElementById('numx'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var imgContent=document.getElementById('imgContent'); var dos = document.getElementsByTagName("span"); var imgChange = document.getElementById('imgChange'); //圖片的數組 var imgArr = ['img/1.jpg','img/b10.png','img/b9.png','img/b2.png']; var num = 0; var timeL; //圖片輪播時左右按鈕是隱藏的 prev.style.display='none'; next.style.display='none'; //實現動起來 animate(num); //實現自動跳 play(); //整個輪播圖滑鼠覆蓋上去就暫時停止，移開又繼續自動跳 imgContent.onmouseover=stop; imgContent.onmouseout=play; //初始化第一個按鈕亮起來的，且第一張圖片顯示出來 dos[0].className = "on"; //給每一個按鈕添加點擊事件 for (var i = 0; i < dos.length; i++) { clickdos(i); } //根據點擊的按鈕的選擇按鈕的覆蓋效果方法 //先迴圈把所有的按鈕都變暗，再給點擊的那個按鈕覆蓋效果 function changebutton(i){ for (var n = 0; n < dos.length; n++) { dos[n].className = ""; } dos[i].className = "on"; } //按鈕的點擊事件，點到哪個按鈕就讓該按鈕有覆蓋效果並且圖片和文字也變化 //本來覆蓋效果的那個方法可以直接放在這裡頭，但是因為有後續圖片的變換按鈕也會跟著有覆蓋效果 //所以還是得分開放 function clickdos(i) { dos[i].onclick = function () { changebutton(i); animate(i); } } //動起來 根據num的數字判斷圖片和文字數組的第num個放出來 function animate(num){ numx.innerHTML = num+1 + '/' + imgArr.length; //數字變化 imgChange.src = imgArr[num]; //圖片變化 } //右邊按鈕的點擊事件，num不斷增加，當到了最後一個就從第一個重新開始 //並且根據num進行圖片文字和按鈕的變動，另一個按鈕同理 next.onclick = function(){ num++; if(num == imgArr.length){ num = 0; } animate(num); changebutton(num); } prev.onclick = function(){ num--; if(num == -1){ num = imgArr.length-1; } animate(num); changebutton(num); } //定時器2s依次變動，同時左右按鈕隱藏 function play(){ timeL=setInterval(function(){next.onclick();},2000) prev.style.display='none'; next.style.display='none'; } //暫停變動，清除定時器，同時左右按鈕顯示 function stop(){ clearInterval(timeL); prev.style.display='block'; next.style.display='block'; } </script>
