|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!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" /> <script src="http://www.cssrain.cn/demo/JQuery+API/jquery-1[1].2.1.pack.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()", 1000); } 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> <br/><br/><br/><br/> <div>转:<a href="http://koyoz.com">koyoz.com</a> </div> </body> </html> |
