使用jQueryFlexSlider

FlexSlider是一个轻量级的jQuery内容滚动插件,压缩后只有4KB大小。它能让你轻松的创建内容滚动的效果,具有非常高的可定制性。它是将UL列表转换成内容滚动的列表,可以自动播放,或者使用导航按钮和键盘来控制

显示效果

安装很简单最总要是jquery版本的问题,花的点时间LIGHTBOX使用的 版本是1.3而FLEXSLIDER却是1.9该列的版本兼容问题,还好上网找的一个就有一大堆的方法搞定,也顺便贴出我的模板文件,做下记录,编辑default.html模板文件

   <!-- Arquivos utilizados pelo jQuery lightBox plugin -->
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/jquery.lightbox-0.5.css" media="screen" />    
<!-- Ativando o jQuery lightBox plugin -->
<script type="text/javascript">
$(function() {
    $('#gallery a').lightBox();
    $('a[rel*=lightbox]').lightBox();
});
</script>

<!-- flexslider.js -->
<link rel="stylesheet" href="/css/flexslider.css" type="text/css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    var jq = jQuery.noConflict();
</script>
<script src="/js/jquery.flexslider.js"></script>

<script type="text/javascript">
    jq(window).load(function() {
    jq('.flexslider').flexslider({
            animation: "slide"
        });
    });
</script>

<script src="/js/jquery.scrollUp.js"></script>
<script type="text/javascript">
    jq(function(){
    jq.scrollUp();
    });
 </script>

然后把修改下css就可以看到效果了.