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