基於jquery的圖片輪播（IE8以上）

時間 2019-11-18

標籤基於 jquery 圖片 ie8 以上欄目 JQuery 简体版

原文原文鏈接

  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>