用FlexSlider制作百度开放云平台幻灯片效果
之前介绍过强大的 jQuery 幻灯片插件 FlexSlider,今天我们用它来制作百度开放云平台首页幻灯片(以下简称“百度幻灯片”)效果,话说个人觉得百度幻灯片还不错,简单简洁不花哨。
其实制作该效果只需要对照着编写 CSS,然后再配置 FlexSlider 的参数即可,介绍 FlexSlider 时就说过。
制作方法
1、引入文件
<link rel="stylesheet" href="css/flexslider.css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.flexslider-min.js"></script>
2、HTML
<div class="flexslider"> <ul class="slides"> <li><img src="images/1.jpg" alt="pic1"></li> <li><img src="images/2.jpg" alt="pic2"></li> <li><img src="images/3.jpg" alt="pic3"></li> <li><img src="images/4.jpg" alt="pic4"></li> </ul> </div>
3、CSS
CSS 有些长,就不贴出来了,需要说明的是,针对该死的 IE6 额外添加了以下代码:
.flex-direction-nav { float: left;} .flex-direction-nav li { float: left;}
4、JavaScript
$(window).load(function() { $('.flexslider').flexslider({ pauseOnHover: true }); $('.flexslider').on({ mouseenter: function(){ $('.flex-direction-nav').show(); }, mouseleave : function(){ $('.flex-direction-nav').hide(); } }); });
百度幻灯片的左右控制只有鼠标悬停在上面才会显示,鼠标移开后会隐藏。而 FlexSlider 没有参数设置这个效果,所以就自行添加吧。
到此就完成了,查看一下演示吧。