欢迎来到我爱模板网，请记住我们的域名5imoban.net。本站资源大部分免费下载。如需定制，可联系站长QQ543031222。如果您觉得本站不错，请推荐给您的好友！

各位热心的网友们，欢迎给本站留言！您的任何建议和意见本站都会认真查看，仔细采纳！

当前位置：模板网首页 > 特效插件 > 滚动图片 > 可扩展数目左右滚动正文

可扩展数目左右滚动jQuery幻灯片

作者：网页模板

大小：0.331MB

点击次数：

发布时间：2014-03-19 15:54

分享到：

特效介绍

jQuery左右滚动的幻灯片，可无限扩展图片数量。带图片描述，或者说是图片标题，有利于SEO。不兼容IE6

使用方法

1、在head区域加入下面的代码：

<link rel="stylesheet" href="css/5imoban.net.css" type="text/css" media="screen" />
<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script type="text/javascript">
    $(window).load(function() {
        $('.flexslider').flexslider();
    });
</script>

2、在您的banner区域加入下面的代码：

<div id="container" style="height:550px;">
    <div class="flexslider">
        <ul class="slides">
            <li>
                <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_samoa.jpg" /></a>
                <p class="flex-caption">模板网www.5imoban.net</p>
            </li>
            <li>
                <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_pumpkin.jpg" /></a>
                <p class="flex-caption">循环播放的jQuery幻灯片</p>
            </li>
            <li>
                <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_donut.jpg" /></a>
                <p class="flex-caption">模板网www.5imoban.net</p>
            </li>
            <li>
                <a href="http://www.5imoban.net" alt="模板网" target="_blank"><img src="images/inacup_vanilla.jpg" /></a>
                <p class="flex-caption">jQuery特效www.5imoban.net</p>
            </li>
        </ul>
  </div>
</div>

如果想增加滚动图片的数目的话，增加li的数量即可。<p>标签内部代码为图片对应标题。