当前位置: 首页 > 工具软件 > SuperSlide > 使用案例 >

superslide 图片滚动

顾嘉德
2023-12-01
<div id="banner">
        <div id="slideBox" class="slideBox">
            <div class="hd">
                <ul></ul>
            </div>
            <div class="bd">
                <ul>
                    <li><img src="1.jpg" alt=""></li>
                    <li><img src="2.jpg" alt=""></li>
                    <li><img src="3.jpg" alt=""></li>
                    <li><img src="4.jpg" alt=""></li>
                </ul>
            </div>
            <!-- 下面是前/后按钮代码,如果不需要删除即可 -->
            <a class="prev" href="javascript:void(0)"> <img src="img/left.png" alt="上一页"></a>
            <a class="next" href="javascript:void(0)"> <img src="img/right.png" alt="下一页"></a>
        </div>
    </div>


<script src="/jquery-2.1.1.min.js"></script>
    <script src="/jquery.SuperSlide.2.1.1_20160524.js"></script>
    <script>
    // #banner轮播图控制
    //titCell 控制分页的元素
    //mainCell 内容区域
    //effect 滚动的方式
    //autoPlay 是否自动
    //vis 可视数量
    //interTime 滚动间隔
    //autoPage 分页的元素
    $("#banner > .slideBox").slide({ titCell:".hd ul",mainCell: ".bd ul",effect: "leftLoop", autoPlay: true, scroll: 1, vis: "auto",interTime:5000,autoPage:'<li></li>' });
    </script>

 类似资料: