首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > asp.net >

js图片轮播解决思路

2012-03-20 
js图片轮播HTML code!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.or

js图片轮播

HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>图片轮播</title><script>function showDaTu(src){document.getElementById("defaultImg").src=src;}</script></head><body><table border="0">    <tr>        <td>        <img src='images/01.jpg' onmouseover="showDaTu('images/06.jpg')"><br />        <img src='images/02.jpg' onmouseover="showDaTu('images/07.jpg')"><br />        <img src='images/03.jpg' onmouseover="showDaTu('images/08.jpg')"><br />        <img src='images/04.jpg' onmouseover="showDaTu('images/09.jpg')">        </td>        <td>        <img src="images/10.jpg" id="defaultImg">        </td>    </tr></table></body></html>



只能鼠标移动到上面的时候改变图片 怎么加个轮播效果

[解决办法]
JScript code
<script type="text/javascript" src="JS/jquery-1.4.3.min.js"></script><script>$(document).ready(function() {        var index = 0;        var count = $("table tr").eq(0).find("td img").length;            setInterval(function(){              $("#defaultImg").attr("src",$("table tr").eq(0).find("td img").eq(index).attr("src"));               if(++index>=count){                  index=0;               }            },3000);        });</script> 

热点排行