1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>插件cycle的简单运用</title> 6 <style type="text/css"> 7 #nav { margin: 5px; } 8 #nav a { margin: 5px; padding: 3px 5px; border: 1px solid #ccc; background: #fc0; text-decoration: none } 9 #nav a.activeSlide { background: #ea0 } 10 #nav a:focus { outline: none; } 11 </style> 12 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 13 <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script> 14 <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script> 15 <script type="text/javascript"> 16 $(function() { 17 $('#slideshow').cycle({ 18 speed: 200, 19 timeout: 3000, 20 pager: '#nav', 21 // pagerEvent: 'mouseover', 22 pagerEvent: 'mouseenter.cycle', 23 pauseOnPagerHover: true 24 }); 25 }); 26 </script> 27 </head> 28 29 <body> 30 <div id="nav"></div> 31 <div id="slideshow" class="pics"> 32 <img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" /> 33 <img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" /> 34 <img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" /> 35 <img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" /> 36 <img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" /> 37 <img src="http://malsup.github.com/images/beach6.jpg" width="200" height="200" /> 38 <img src="http://malsup.github.com/images/beach7.jpg" width="200" height="200" /> 39 </div> 40 <script type="text/javascript"> 41 $(function(){ 42 $('#slideshow').cycle({ 43 speed: 200, 44 timeout: 3000, 45 pager: '#nav', 46 pagerEvent: 'mouseover', 47 pauseOnPagerHover: true 48 }); 49 }); 50 </script> 51 </body> 52 </html>