使用superslide制作漂亮的轮播图效果,并控制左右按钮的显示与隐藏
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

本文展示如何使用jquery控制左右按钮的显示与隐藏。 SuperSlide可以解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

关键代码

<!DOCTYPE html >
<html>
<head>
    <title>superslide轮播图</title>
    <script src="jquery-1.11.2.min.js" type="text/javascript"></script>
    <script src="jquery.superslide.2.1.1.js" type="text/javascript"></script>
</head>
<body>
    <div class="fullSlide">
        <div class="bd">
            <ul>
                <li _src="url(banner1.jpg)" style="background: center no-repeat;"><a href="#"></a>
                </li>
                <li _src="url(banner2.jpg)" style="background: center no-repeat;"><a href="#"></a>
                </li>
                <li _src="url(banner3.jpg)" style="background: center no-repeat;"><a href="#"></a>
                </li>
            </ul>
        </div>
        <div class="hd">
            <ul>
            </ul>
        </div>
        <span class="prev"></span><span class="next"></span>
    </div>
    <script type="text/javascript">
        /* 控制左右按钮显示 */
        jQuery(".fullSlide").hover(function () {
            jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)
        },
        function () {
            jQuery(this).find(".prev,.next").fadeOut()
        });

        /* 调用SuperSlide */
        jQuery(".fullSlide").slide({
            titCell: ".hd ul", mainCell: ".bd ul", effect: "fold", autoPlay: true, autoPage: true, trigger: "click",
            delayTime: 3,
            startFun: function (i) {
                var curLi = jQuery(".fullSlide .bd li").eq(i);
                /* 当前大图的li */
                if (!!curLi.attr("_src")) {
                    curLi.css("background-image", curLi.attr("_src")).removeAttr("_src")
                    /* 将_src地址赋予li背景，然后删除_src */
                }
            }
        });
    </script>
</body>
</html>