效果图：
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