使用lunbo.js插件制作一个图片左右滚动效果

文章内容

这个例子中，我们有一个简单的轮播图，它有很多图片，并且可以通过点击按钮来实现向左滚动或者向右滚动。 这个例子包含自动播放或者轮播间隔的处理,还有默认向左还是向右滚动。您可以在此基础上添加更多的功能。

html代码

<script type="text/javascript" src="jquery/1.10.2/jquery.min.js"></script>
<script src="js/lunbo.js"></script>
<div class="jqfree">
        <div class="container">
            <div class="Box">
                <div class="Box_con">
                    <div class="conbox" id="BoxUl">
                        <ul>
                            <li><a href="#">
                                <div class="jqfree_pic">
                                    <img src="http://img.jqfree.com/700X500-5.jpg" />
                                </div>
                                <p>
                                    图片名字
                                </p>
                            </a></li>
                            <li><a href="#">
                                <div class="jqfree_pic">
                                    <img src="http://img.jqfree.com/700X500-5.jpg" />
                                </div>
                                <p>
                                    图片名字
                                </p>
                            </a></li>
                            <li><a href="#">
                                <div class="jqfree_pic">
                                    <img src="http://img.jqfree.com/700X500-5.jpg" />
                                </div>
                                <p>
                                    图片名字
                                </p>
                            </a></li>
                            <li><a href="#">
                                <div class="jqfree_pic">
                                    <img src="http://img.jqfree.com/700X500-5.jpg" />
                                </div>
                                <p>
                                    图片名字
                                </p>
                            </a></li>
                            <li><a href="#">
                                <div class="jqfree_pic">
                                    <img src="http://img.jqfree.com/700X500-5.jpg" />
                                </div>
                                <p>
                                    图片名字
                                </p>
                            </a></li>
                        </ul>
                    </div>
                    <div class="conbox_button">
                        <span class="btnl btn" id="btnl"></span><span class="btnr btn" id="btnr"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
//调用lunbo.js
LbMove('BoxUl', 'btnl', 'btnr', 'BoxSwitch', true, 'left', true, 240, 1000, 4000, 5);  
</script>