Jquery特效一:图片轮换显示
http://www.flatws.cn/article/program/css/2011-02-15/12940.html
|
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 |
Html代码 <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 = _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> |
