听说code能改变world，所以就学了

一款很好用的jquery图片滚动插件-jquery.flexslider.js

效果图：

html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta content="charset=utf-8">
 5     <title>FlexSlider 2</title>
 6     <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
 7 </head>
 8 <body>
 9 
10     <div class="flexslider">
11           <ul class="slides">
12             <li>
13                   <img src="images/kitchen_adventurer_cheesecake_brownie.jpg" />
14                   </li>
15                   <li>
16                   <img src="images/kitchen_adventurer_lemon.jpg" />
17                   </li>
18           </ul>
19     </div> 
20 
21   <!-- jQuery -->
22   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
23   <!-- FlexSlider -->
24   <script src="js/jquery.flexslider.js"></script>
25   <script type="text/javascript">
26     $(window).load(function(){
27       $('.flexslider').flexslider({
28         animation: "slide",
29         start: function(slider){
30           $('body').removeClass('loading');
31         }
32       });
33     });
34   </script>
35 
36 
37 </body>
38 </html>

 css代码

  1 /* Browser Resets
  2 *********************************/
  3 .flex-container a:active,
  4 .flexslider a:active,
  5 .flex-container a:focus,
  6 .flexslider a:focus  {outline: none;}
  7 .slides,
  8 .flex-control-nav,
  9 .flex-direction-nav {
 10     margin: 0; 
 11     padding: 0; 
 12     list-style: none;
 13 }
 14 .flexslider {
 15     margin: 0; 
 16     padding: 0;}
 17 .flexslider .slides > li {
 18     display: none; 
 19     
 20 } 
 21 .flexslider .slides img {
 22     width: 650px; 
 23     height: 350px;
 24     display: block;
 25 }
 26 .flex-pauseplay span {
 27     text-transform: capitalize;
 28 }
 29 .flexslider { 
 30     width: 650px;
 31     height: 350px;
 32     margin: 0 0 60px; 
 33     background: #fff; 
 34     border: 4px solid #fff; 
 35     position: relative; -
 36     zoom: 1;
 37     overflow: hidden;
 38      }
 39 
 40 .flexslider .slides { 
 41     zoom: 1; 
 42 }
 43 .carousel li { 
 44     margin-right: 5px; 
 45 }
 46 
 47 /* Direction Nav */
 48 .flex-direction-nav {
 49     height: 0;
 50 }
 51 .flex-direction-nav a  { 
 52     text-decoration:none; 
 53     display: block; 
 54     width: 27px; 
 55     height: 27px; 
 56     line-height: 150px;
 57     margin: -20px 0 0; 
 58     position: absolute; 
 59     top: 50%; 
 60     z-index: 10; 
 61     overflow: hidden; 
 62     opacity: 0; 
 63     cursor: pointer; 
 64     color: rgba(0,0,0,0.8); 
 65 
 66 }
 67 .flex-direction-nav .flex-prev { 
 68     background: url(../images/bg_direction_nav.png)no-repeat 0px 0px;
 69     left: -50px; 
 70 }
 71 .flex-direction-nav .flex-next { 
 72     background: url(../images/bg_direction_nav.png)no-repeat -30px 0px;
 73     right: -50px; 
 74     text-align: right; 
 75 }
 76 .flexslider:hover .flex-prev { 
 77     opacity: 0.7; 
 78     left: 10px; 
 79 }
 80 .flexslider:hover .flex-next { 
 81     opacity: 0.7; 
 82     right: 10px; 
 83 }
 84 .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { 
 85     opacity: 1; 
 86 }
 87 .flex-direction-nav .flex-disabled { 
 88     opacity: 0!important; 
 89     filter:alpha(opacity=0); 
 90     cursor: default; 
 91 }
 92 .flex-direction-nav a:before  { 
 93     font-family: "flexslider-icon"; 
 94     font-size: 40px; 
 95     display: inline-block; 
 96     
 97 }
 98 .flex-direction-nav a.flex-next:before  { 
 99     
100 }
101 
102 /* Pause/Play */
103 .flex-pauseplay a { 
104     display: block; 
105     width: 20px; 
106     height: 20px; 
107     position: absolute; 
108     bottom: 5px; 
109     left: 10px; 
110     opacity: 0.8; 
111     z-index: 10; 
112     overflow: hidden; 
113     cursor: pointer; 
114     color: #000; 
115 }
116 .flex-pauseplay a:before  { 
117     font-family: "flexslider-icon"; 
118     font-size: 20px; 
119     display: inline-block; 
120     content: '\f004'; }
121 .flex-pauseplay a:hover  { 
122     opacity: 1; 
123 }
124 .flex-pauseplay a.flex-play:before { 
125     content: '\f003'; 
126 }
127 
128 /* Control Nav */
129 .flex-control-nav {
130     width: 20%; 
131     position: absolute; 
132     bottom: 30px; 
133     right: 0px;
134     text-align: center;
135 }
136 .flex-control-nav li {
137     margin: 0 6px; 
138     display: inline-block; 
139     zoom: 1; 
140     *display: inline;
141 }
142 .flex-control-paging li a {
143     width: 11px; 
144     height: 11px; 
145     display: block; 
146     background: #666; 
147     background: rgba(0,0,0,0.5); 
148     cursor: pointer; 
149     text-indent: -9999px; 
150     border-radius: 11px;
151 }
152 .flex-control-paging li a:hover { 
153     background: #333; 
154     background: rgba(0,0,0,0.7); 
155 }
156 .flex-control-paging li a.flex-active { 
157     background: #000; 
158     background: rgba(0,0,0,0.9); 
159     cursor: default; 
160 }
161 
162 .flex-control-thumbs {
163     margin: 5px 0 0; position: static; overflow: hidden;}
164 .flex-control-thumbs li {width: 25%; float: left; margin: 0;}
165 .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;}
166 .flex-control-thumbs img:hover {opacity: 1;}
167 .flex-control-thumbs .flex-active {opacity: 1; cursor: default;}

插件下载：down

 

posted @ 2014-01-04 14:40  李腾  阅读(3204)  评论(0)  编辑  收藏  举报

如果我加了黑链呢：http://liteng.org