首页 > 特效插件 > 滚动轮播 >  两款简约左右滚动和上下滚动的jquery flexslider焦点图轮播正文

两款简约左右滚动和上下滚动的jquery flexslider焦点图轮播

特效介绍
jquery flexslider焦点图轮播
兼容IE6+的jquery flexslider焦点图轮播,一共两个,一个左右滚动,一个上下滚动。
FlexSlider是一个轻量级的jQuery内容滚动插件,压缩后只有4KB大小。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。它是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制。
更多关于jquery flexslider可以访问:http://forum.jquery.com/topic/http-flex-madebymufffin-com-demo
使用方法
1、在头部引入下面的代码
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>
2、如果想要左右滚动,请复制<!-- 代码1开始 -->和<!-- 代码1结束 -->之间的代码到需要播放幻灯的位置,如果想实现上下滚动,请复制<!-- 代码2开始 -->和<!-- 代码2结束 -->之间的代码到需要播放幻灯的位置
3、复制下面的代码到第二步代码的后面
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript">
$(function(){
    $('#demo01').flexslider({
        animation: "slide",
        direction:"horizontal",
        easing:"swing"
    });   
    $('#demo02').flexslider({
        animation: "slide",
        direction:"vertical",
        easing:"swing"
    });   
});
</script>