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);

};