效果图及代码如下：<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script><style type="text/css">* {margin:0;padding:0;font-size:12px;font-family:Verdana;} img {border:0}#pic{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;}#play{position:absolute;margin-left:200px;margin-top:-30px;}#play a{text-decoration: none;border:1px solid #CEDEF7;background-color:#E8FCEB;width:20px;height:20px;color:#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;}</style><script type="text/javascript"> var _c = _h = 0; $(function () { $('#play > a').click(function () { var i = $(this).attr('alt') - 1; clearInterval(_h); _c = i; play(); change(i); }) $("#pic img").hover(function () { clearInterval(_h) }, function () { play() }); play(); }) function play() { _h = setInterval("auto()", 3000); } function change(i) { $('#play > a').css('background-color', '#E8FCEB').eq(i).css('background-color', '#C6FF5E').blur(); $("#pic img").hide().eq(i).fadeIn('slow'); } function auto() { _c = _c > 2 ? 0 : _c + 1; change(_c); }</script><title>js图片播放轮换</title></head>
<body><div id="pic"> <img src="http://www.cssrain.cn/demo/pic/cssrain-logo.JPG" width="300" height="200" alt="" /> <img src="http://www.cssrain.cn/demo/pic/usbmingpian.jpg" width="300" height="200" alt="" /> <img src="http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg" width="300" height="200" alt="" /> <img src="http://www.cssrain.cn/demo/pic/ganyingdeng.jpg" width="300" height="200" alt="" /></div><div id="play"> <a href="###" alt="1" style="background-color:#C6FF5E">1</a> <a href="###" alt="2" >2</a> <a href="###" alt="3" >3</a> <a href="###" alt="4" >4</a></div></body></html>
