JSP+JavaScript實現圖片切換

使用jsp+JavaScript實現圖片切換。

思路：通過JavaScript設置圖片是否顯示實現來實現切換的效果。

下面給出三幅圖片，每幅圖片下面附帶有文字說明，切換圖片的時候，文字也切換。

              <div class="news_picture">
                <div>
                  <table class="ge" id="ge" cellspacing="0" cellpadding="0">
                    <tbody>
                      <tr>
                        <td class="pic" id="bimg">                          
                          <div id="top_pictures">
                                <div class="dis" id="top_picture_image_0" style="display: none;">
                                    <a href="http://lib.csdn.net/base/22" target="_blank" title="1111"><img alt="111111" src="./elements/images/1.jpg"></a>
                                </div>
                                <div class="dis" id="top_picture_image_1" style="display: none;">
                                    <a href="_blank" target="_blank" title="2222"><img alt="222" src="./elements/images/2.jpg"></a>
                                </div>
                                <div class="dis" id="top_picture_image_2">
                                    <a href="_blank" target="_blank" title="333"><img alt="333" src="./elements/images/3.jpg"></a>
                                </div>
                            </div>
                            <table id="font_hd" cellspacing="0" cellpadding="0">
                                <tbody>
                                  <tr>
                                    <td class="lkff" id="info">
                                        <div class="dis" id="top_picture_title_0" style="display: none;">
                                          <a href="_blank" target="_blank" title="111">111</a>
                                        </div>
                                        <div class="dis" id="top_picture_title_1" style="display: none;">
                                          <a href="_blank" target="_blank" title="222">222</a>
                                        </div>
                                        <div class="dis" id="top_picture_title_2">
                                          <a href="_blank" target="_blank" title="333">333</a>
                                        </div>
                                    </td>
                                    <td id="simg">
                                      <div id="simg-wrap">
                                        <div id="top_picture_button_0"> 1 </div>
                                        <div id="top_picture_button_1"> 2 </div>
                                        <div id="top_picture_button_2"> 3 </div>
                                      </div>
                                    </td>
                                  </tr>
                                </tbody>
                          </table>
                        </td>
                      </tr>
                    </tbody>
                  </table>
                  <-- 引用其他文件中的js文件 -->
                  <script language='javascript' src="./jsfiles/slider.js"></script>
                  
                </div>

./jsfiles/slider.js文件的內容

/*
實現圖片的動態切換
*/
window.onload = slider();


function slider(){
    var sliderbox = document.getElementById('bimg');
    
    var pic = document.getElementById('top_pictures');
    var picdiv = pic.getElementsByTagName('div');


    var hint = document.getElementById('info');
    var hintdiv = hint.getElementsByTagName('div');
    
    var numlable = document.getElementById('simg-wrap');
    var numlablediv = numlable.getElementsByTagName('div');
    
    var inow = 0;


    sliderbox.onmouseover = function() {
        clearInterval(timer);
    }


    sliderbox.onmouseout =function() {
        timer = setInterval(autoplay, 2000);
    }


    for(var i=0; i<numlablediv.length; i++) {
        numlablediv[i].index = i;
        numlablediv[i].onclick = function() {
            clearInterval(timer);
            for(var a=0; a<numlablediv.length; a++) {
                numlablediv[a].className = "";
                hintdiv[a].style.display = "none";
                picdiv[a].style.display = "none";
            }
            this.className = "numlable";
            picdiv[this.index].style.display = "block";
            hintdiv[this.index].style.display = "block";
            inow = this.index;
        }
    }


    function autoplay() {
        for(var i=0; i<picdiv.length; i++) {

    <!-- 隱藏當前顯示的圖片 -->
            picdiv[i].style.display = "none";
            hintdiv[i].style.display = "none";
            numlablediv[i].className = "";
        }

       <!-- 顯示新的圖片 -->
        picdiv[inow].style.display = "block";
        hintdiv[inow].style.display = "block";
        numlablediv[inow].className = "numlable";
        inow = inow==picdiv.length-1 ? 0 : inow+1;
    }


    timer = setInterval(autoplay, 3000);
    
};