学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

SuperSlide 2 　　轮播图插件，较老、但还好用。

适用于PC，是绑定到jquery上的方法： $.slide();　　如果在实际中找不到.slide方法，请检查jquery等.js文件的引入次序。（另外切忌不要引入两次jquery.js，会把$的方法洗掉而导致失效的）

http://www.superslide2.com/SuperSlide.2.1.2/jquery.SuperSlide.2.1.2.js　　jquery.SuperSlide.2.1.2 （下载）

http://www.superslide2.com/howToUse.html　　如何使用

一个小例子:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.superslide2.com/SuperSlide.2.1.2/jquery.SuperSlide.2.1.2.js"></script>
<!-- <script type="text/javascript" src="http://s1.xxx.com/common/js/plugin/jquery.SuperSlide.2.1.1.js"></script> -->
<script type="text/javascript">
$(function(){
    if( $('.lunbo-container').length>0 ){
        $(".lunbo-container").slide({mainCell:".bd",autoPlay:true,pnLoop:true});
    }
});
</script>
<style type="text/css">
ul,li{margin:0;padding:0;list-style:none;}

.lunbo-container{position:relative;padding:24px 27px;width:256px;height:256px;border:1px solid #000;overflow:hidden;}
.lunbo-container .bd{position:relative;height:100%;z-index:0;}
.lunbo-container .bd .img100{display:block;width:256px;height:256px;}

.lunbo-container .hd{position:absolute;bottom:40px;left:50%;width:110px;margin-left:-55px;padding:2px 5px;height:10px;z-index:10;}/*小圆点*/
.lunbo-container .hd .bullet{position:relative;float:left;width:10px;height:10px;background:#fff;margin:0 5px;border-radius:50%;cursor:pointer;z-index:2;}
.lunbo-container .hd .bullet.on{background:#ff7200;}
.lunbo-container .hd .bullet-bg{position:absolute;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.5);border-radius:6px;z-index:1;}
</style>
<!-- 轮播图区域 start -->
<div class="lunbo-container">
    <div class="hd"><!-- 底部小圆点 -->
        <ul class="">
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
            <li class="bullet"></li>
        </ul>
        <div class="bullet-bg"></div>
    </div>
    <ul class="bd"><!-- 轮播图片 -->
        <li><a href="##" target="_blank"><img src="http://img.article.pchome.net/00/44/67/59/pic_lib/wm/1.jpg" class="img100"/></a></li>
        <li><a href="##" target="_blank"><img src="http://img.article.pchome.net/00/44/67/59/pic_lib/wm/3.jpg" class="img100"/></a></li>
        <li><a href="##" target="_blank"><img src="http://img.article.pchome.net/00/44/67/59/pic_lib/wm/5.jpg" class="img100"/></a></li>
        <li><a href="##" target="_blank"><img src="http://img.article.pchome.net/00/44/67/59/pic_lib/wm/7.jpg" class="img100"/></a></li>
        <li><a href="##" target="_blank"><img src="http://www.iconpng.com/png/round_icons_set/Red-Apple.png" class="img100"/></a></li>
    </ul>
</div>
<!-- 轮播图区域 end -->

横向全屏焦点图（从官网扒的例子）

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.superslide2.com/SuperSlide.2.1.2/jquery.SuperSlide.2.1.2.js"></script>
<style type="text/css">
/* css 重置 */
body{margin:0;padding:0;}
ul,li{margin:0;padding:0;list-style:none;}
*{zoom:1}


.fullscreen{position:relative;background:#000;margin:0 auto;}
.fullscreen .bd{position:relative;z-index:0;}
.fullscreen .bd li img{width:100%;vertical-align:top;}

/*底部小圆点*/
.fullscreen .hd{position:relative;z-index:1;margin-top:-30px;height:30px;line-height:30px; text-align:center;background:#000;filter:alpha(opacity=60);opacity:0.6;}
.fullSlide .hd ul{text-align:center; padding-top:5px;}
.fullscreen .hd ul li{display:inline-block;zoom:1;width:8px;height:8px;margin:5px;background:url(images/tg_flash_p.png) -18px 0;cursor:pointer;overflow:hidden;}
.fullscreen .hd ul .on{background-position:0 0;}

/*左右箭头*/
.fullscreen .arrowbtn{display:block;width:55px;height:55px;position:relative;margin:-27% 3% 0 3%;;background:url(images/arrow.png) no-repeat;filter:alpha(opacity=40);opacity:0.4;z-index:1;}
.fullscreen .prev{background-position:left 0;float:left;}
.fullscreen .next{background-position:right 0;float:right;}
</style>
<div class="fullscreen">
    <div class="bd"><!-- 轮播图图片 -->
        <ul>
            <li><a target="_blank" href="http://www.superslide2.com"><img src="images/1.jpg"/></a></li>
            <li><a target="_blank" href="http://www.superslide2.com"><img src="images/2.jpg"/></a></li>
            <li><a target="_blank" href="http://www.superslide2.com"><img src="images/3.jpg"/></a></li>
            <li><a target="_blank" href="http://www.superslide2.com"><img src="images/4.jpg"/></a></li>
            <li><a target="_blank" href="http://www.superslide2.com"><img src="images/5.jpg"/></a></li>
        </ul>
    </div>

    <div class="hd"><ul></ul></div><!-- 底部小圆点 -->
    <a class="arrowbtn prev" href="javascript:void(0)"></a><!-- 左箭头 -->
    <a class="arrowbtn next" href="javascript:void(0)"></a><!-- 右箭头 -->
</div>
<script type="text/javascript">
    $(".fullscreen").slide({ titCell:".hd ul", mainCell:".bd ul", effect:"leftLoop", vis:"auto", autoPlay:true, autoPage:true, trigger:"click"});
</script>

...

学习笔记： js插件 —— SuperSlide 2 （轮播图插件，PC用）

相关推荐