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

时间：2023-01-19 23:14:41

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

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

http://www.superslide2.com/　　官网

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="data:images/1.jpg"/></a></li>

            <li><a target="_blank" href="http://www.superslide2.com"><img src="data:images/2.jpg"/></a></li>

            <li><a target="_blank" href="http://www.superslide2.com"><img src="data:images/3.jpg"/></a></li>

            <li><a target="_blank" href="http://www.superslide2.com"><img src="data:images/4.jpg"/></a></li>

            <li><a target="_blank" href="http://www.superslide2.com"><img src="data: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>

...

相关文章