1 <!doctype html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>jQuery可悬停控制图片轮播代码 - 站长素材</title> 7 <style> 8 .flexslider { 9 margin: 0px auto 20px; 10 position: relative; 11 width: 100%; 12 height: 482px; 13 overflow: hidden; 14 zoom: 1; 15 } 16 17 .flexslider .slides li { 18 width: 100%; 19 height: 100%; 20 } 21 22 .flex-direction-nav a { 23 width: 70px; 24 height: 70px; 25 line-height: 99em; 26 overflow: hidden; 27 margin: -35px 0 0; 28 display: block; 29 background: url(images/ad_ctr.png) no-repeat; 30 position: absolute; 31 top: 50%; 32 z-index: 10; 33 cursor: pointer; 34 opacity: 0; 35 filter: alpha(opacity=0); 36 -webkit-transition: all .3s ease; 37 border-radius: 35px; 38 } 39 40 .flex-direction-nav .flex-next { 41 background-position: 0 -70px; 42 right: 0; 43 } 44 45 .flex-direction-nav .flex-prev { 46 left: 0; 47 } 48 49 .flexslider:hover .flex-next { 50 opacity: 0.8; 51 filter: alpha(opacity=25); 52 } 53 54 .flexslider:hover .flex-prev { 55 opacity: 0.8; 56 filter: alpha(opacity=25); 57 } 58 59 .flexslider:hover .flex-next:hover, 60 .flexslider:hover .flex-prev:hover { 61 opacity: 1; 62 filter: alpha(opacity=50); 63 } 64 65 .flex-control-nav { 66 width: 100%; 67 position: absolute; 68 bottom: 10px; 69 text-align: center; 70 } 71 72 .flex-control-nav li { 73 margin: 0 2px; 74 display: inline-block; 75 zoom: 1; 76 *display: inline; 77 } 78 79 .flex-control-paging li a { 80 background: url(images/dot.png) no-repeat 0 -16px; 81 display: block; 82 height: 16px; 83 overflow: hidden; 84 text-indent: -99em; 85 width: 16px; 86 cursor: pointer; 87 } 88 89 .flex-control-paging li a.flex-active, 90 .flex-control-paging li.active a { 91 background-position: 0 0; 92 } 93 94 .flexslider .slides a img { 95 width: 100%; 96 height: 482px; 97 display: block; 98 } 99 </style> 100 </head> 101 102 <body> 103 <br/><br/><br/> 104 <!-- 轮播广告 --> 105 <div id="banner_tabs" class="flexslider"> 106 <ul class="slides"> 107 <li> 108 <a title="" target="_blank" href="#"> 109 <img width="1920" height="482" alt="" style="background: url(images/banner1.jpg) no-repeat center;" src="images/alpha.png"> 110 </a> 111 </li> 112 <li> 113 <a title="" href="#"> 114 <img width="1920" height="482" alt="" style="background: url(images/banner2.jpg) no-repeat center;" src="images/alpha.png"> 115 </a> 116 </li> 117 <li> 118 <a title="" href="#"> 119 <img width="1920" height="482" alt="" style="background: url(images/banner3.jpg) no-repeat center;" src="images/alpha.png"> 120 </a> 121 </li> 122 </ul> 123 <ul class="flex-direction-nav"> 124 <li><a class="flex-prev" href="javascript:;">Previous</a></li> 125 <li><a class="flex-next" href="javascript:;">Next</a></li> 126 </ul> 127 <ol id="bannerCtrl" class="flex-control-nav flex-control-paging"> 128 <li><a>1</a></li> 129 <li><a>2</a></li> 130 <li><a>2</a></li> 131 </ol> 132 </div> 133 <script src="js/jquery-1.10.2.min.js"></script> 134 <script src="js/slider.js"></script> 135 <script type="text/javascript"> 136 $(function() { 137 var bannerSlider = new Slider($('#banner_tabs'), { 138 time: 5000, 139 delay: 400, 140 event: 'hover', 141 auto: true, 142 mode: 'fade', 143 controller: $('#bannerCtrl'), 144 activeControllerCls: 'active' 145 }); 146 $('#banner_tabs .flex-prev').click(function() { 147 bannerSlider.prev() 148 }); 149 $('#banner_tabs .flex-next').click(function() { 150 bannerSlider.next() 151 }); 152 }) 153 </script> 154 155 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> 156 <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> 157 <p>来源：<a href="http://sc.chinaz.com/" target="_blank">站长素材</a></p> 158 </div> 159 </body> 160 </html>
例子源码：
链接：http://pan.baidu.com/s/1jIPPTIm 密码：bxo6