使用jquery.superslide制作一个漂亮的图片左右滚动效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

‌Superslide2‌是一个基于jQuery的插件，设计用于网页开发中的滚动效果。它提供了多种扩展功能，几乎涵盖了当前web开发的特效需求。这个插件的强大之处在于其几乎囊括了所有web开发中可能需要的滚动效果，尽管一些扩展特效需要付费，但开发者认为这是合理的，因为开发者需要为他们的劳动成果支付费用。Superslide2的使用需要引用jQuery.js和jquery.SuperSlide.js；本文章分享一个Superslide2制作的图片左右滚动效果：

html代码

<div class="section">
    <div class="container">
        <div class="slide">
            <div class="slideBox">
                <ul>
                    <li><a href="#">
                        <img src="images/1.jpg" alt=" " />
                    </a></li>
                    <li><a href="#">
                        <img src="images/2.jpg" alt=" " />
                    </a></li>
                    <li><a href="#">
                        <img src="images/3.jpg" alt=" " />
                    </a></li>
                    <li><a href="#">
                        <img src="images/4.jpg" alt=" " />
                    </a></li>
                </ul>
                <a class="sNext" href="javascript:void(0)"></a><a class="sPrev" href="javascript:void(0)">
                </a>
            </div>
        </div>
    </div>
</div>

在head里面引入

<link rel="stylesheet" href="css/index.css" />
<script src="jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.superslide.2.1.js" type="text/javascript"></script>

最后调用superslide

js代码

<script>
    jQuery(".slide .slideBox").slide({ mainCell: "ul", vis: 2, prevCell: ".sPrev", nextCell: ".sNext", effect: "leftLoop" }); 
</script>