FlexSlider制作新浪2014成都车展幻灯片
简介
2014 成都国际车展已于昨天(8月29日)启动,各大门户网站都制作了专题,今天我们用 jQuery 幻灯片插件 FlexSlider 来制作新浪车展专题的幻灯片。
浏览器兼容
IE6+ ✔ | Chrome ✔ | Firefox ✔ | Opera ✔ | Safari ✔ |
制作方法
1、引入文件
<script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script>
2、HTML
<div class="dowebok"> <ul class="slides"> <li><a href="###"><img src="images/1.jpg" alt="pic1"></a></li> <li><a href="###"><img src="images/2.jpg" alt="pic2"></a></li> <li><a href="###"><img src="images/3.jpg" alt="pic3"></a></li> <li><a href="###"><img src="images/4.jpg" alt="pic4"></a></li> <li><a href="###"><img src="images/5.jpg" alt="pic5"></a></li> </ul> </div>
3、CSS
* { margin:0; padding:0; } .dowebok { position:relative; width:660px; height:436px; margin:0 auto; overflow:hidden; } .dowebok img { display:block; border:0 none; } .dowebok ul,.dowebok ol { list-style-type:none; } .flex-viewport { z-index:1; } .flex-control-nav { position:absolute; right:110px; bottom:10px; z-index:2; width:130px; text-align:right; } .flex-control-nav li { display:inline-block; *display:inline; zoom:1; } .flex-control-nav a { float:left; width:23px; height:23px; line-height:100px; overflow:hidden; background:url(images/dot1.png) 4px 4px no-repeat; cursor:pointer; } .flex-control-nav .flex-active { background:url(images/dot2.png) 3px 3px no-repeat; } .flex-direction-nav { position:absolute; z-index:3; right:0; bottom:0; width:100px; height:50px; } .flex-direction-nav li { float:left; } .flex-direction-nav a { float:left; width:50px; height:50px; text-indent:-9999px; overflow:hidden; } .flex-prev { background:#fff url(images/bg.png) 0 0 no-repeat; } .flex-prev:hover { background-position:0 -50px; } .flex-next { background:#fff url(images/bg.png) right 0 no-repeat; } .flex-next:hover { background-position:-50px -50px; }
4、JavaScript
$(function(){ $('.dowebok').flexslider({ animation: 'slide', pauseOnHover: true, prevText: '上一个', nextText: '下一个' }); });