SuperSlide——再次接觸

原來自己很早之前就接觸過SuperSlider這個神奇的插件，原諒自己又得了“健忘症”，因此昨天就把自己“坑”了一把：

前言：

交易一期的項目即將上線，在解決測試同事們提出的bug的時候，無意間看到頁面有一個神奇的現象：

看着這左右不停變換的圖片，心里是不是有點高興：這樣的效果還真不錯！可是頭疼的卻在后面……

當企業資質下只有一張圖片時，它就變成了兩張一模一樣的圖片，而且還是靜態的，並不會自由輪播。究其原因：是負責這個頁面的同事在選擇輪播插件的時候，選擇了一個bug多的插件。而恰好我又有“強迫症”，看見該同事在忙其他的，而他的電腦環境也都變成了go環境，於是熱心的自己就上去解決bug，結果就深深的愛上了SuperSlider……

解決過程：

先到SuperSlider官網（http://www.superslide2.com/demo.html），找到類似的demo：

接着看看官網上的例子是怎樣解決這個問題的，（html主要代碼）：

用之前，記得先引用:

 

...
 <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/shopinfo/jquery.SuperSlide.2.1.1.js"></script>
...

 

這樣才可以繼續使用。

 

...
<style type="text/css">
        /* css 重置 */
        *{margin:0; padding:0; list-style:none; }
        body{ background:#fff; font:normal 12px/22px 宋體;  }
        img{ border:0;  }
        a{ text-decoration:none; color:#333;  }
        a:hover{ color:#1974A1;  }
        .js{width:90%; margin:10px auto 0 auto; }
        .js p{ padding:5px 0; font-weight:bold; overflow:hidden;  }
        .js p span{ float:right; }
        .js p span a{ color:#f00; text-decoration:underline;   }
        .js textarea{ height:100px;  width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa;  border-left:2px solid #aaa;  }

        /* 本例子css */
        .slideGroup{ width:510px; border:1px solid #ddd; text-align:left;  }
        .slideGroup .parHd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative;  }
        .slideGroup .parHd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
        .slideGroup .parHd ul li{ float:left; padding:0 15px; cursor:pointer;  }
        .slideGroup .parHd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
        .slideGroup .slideBox{ overflow:hidden; zoom:1; padding:10px 0 10px 42px; position:relative;   }

        .slideGroup .sPrev,.slideGroup .sNext{ position:absolute; left:5px; top:10px; display:block; width:30px; height:94px; border:1px solid #ddd; background:url(images/icoLeft.gif) center center no-repeat #f4f4f4; }
        .slideGroup .sNext{ left:auto; right:5px; background:url(images/icoRight.gif) center center no-repeat #f4f4f4;  }
        .slideGroup .sPrev:hover,.slideGroup .sNext:hover{ border-color:#f60;  }

        .slideGroup .parBd ul{ overflow:hidden; zoom:1;   }
        .slideGroup .parBd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
        .slideGroup .parBd ul li .pic{ text-align:center; }
        .slideGroup .parBd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
        .slideGroup .parBd ul li .pic a:hover img{ border-color:#999;  }
        .slideGroup .parBd ul li .title{ line-height:24px;   }


        </style>


        <div class="slideGroup" style="margin:0 auto">
            <div class="parHd">
                <ul><li>教育</li><li>培訓</li><li>出國</li></ul>
            </div>
            <div class="parBd">

                    <div class="slideBox">
                        <a class="sPrev" href="javascript:void(0)"></a>
                        <ul>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖1.1</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖1.2</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖1.3</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖1.4</a></div>
                            </li>
                        </ul>
                        <a class="sNext" href="javascript:void(0)"></a>
                    </div><!-- slideBox End -->

                    <div class="slideBox">
                        <a class="sPrev" href="javascript:void(0)"></a>
                        <ul>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖2.1</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖2.2</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖2.3</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖2.4</a></div>
                            </li>
                        </ul>
                        <a class="sNext" href="javascript:void(0)"></a>
                    </div><!-- slideBox End -->

                    <div class="slideBox">
                        <a class="sPrev" href="javascript:void(0)"></a>
                        <ul>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖3.1</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖3.2</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖3.3</a></div>
                            </li>
                            <li>
                                <div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
                                <div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果圖3.4</a></div>
                            </li>
                        </ul>
                        <a class="sNext" href="javascript:void(0)"></a>
                    </div><!-- slideBox End -->

            </div><!-- parBd End -->
        </div>
...

接着還有最重要的js部分：

<script type="text/javascript">
            /*
            SuperSlide組合注意：
            1、內外層mainCell、targetCell、prevCell、nextCell等對象不能相同，除非特殊應用；
            2、注意書寫順序，通常先寫內層js調用，再寫外層js調用
            */

            /* 內層圖片滾動切換 */
            jQuery(".slideGroup .slideBox").slide({ mainCell:"ul",vis:3,prevCell:".sPrev",nextCell:".sNext",effect:"leftLoop"});

            /* 外層tab切換 */
            jQuery(".slideGroup").slide({titCell:".parHd li",mainCell:".parBd"});

        </script>

按照上面的介紹，再把自己項目中所需要的東西套進去（html主要代碼）：

...
  <li><span>企業資質：</span>
                        <div class="slideGroup" style="margin:0 auto">
                            <div class="parBd">
                                <div class="slideBox">
                                    <a class="sPrev" href="javascript:void(0)"></a>
                                    <ul>
                                        {{if datas.companylist.yyzz}}

                                        <li>
                                            <div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"
                                                                target="_blank"><img
                                                    src="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"></a>
                                            </div>
                                            <div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.yyzz }}"
                                                                  target="_blank">營業執照</a>
                                            </div>
                                        </li>
                                        {{/if}}
                                        {{if datas.companylist.zzdmz}}
                                        <li>
                                            <div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"
                                                                target="_blank"><img
                                                    src="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"></a>
                                            </div>
                                            <div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.zzdmz }}"
                                                                  target="_blank">組織機構代碼證</a>
                                            </div>
                                        </li>
                                        {{/if}}
                                        {{if datas.companylist.khxkz}}
                                        <li>
                                            <div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"
                                                                target="_blank"><img
                                                    src="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"></a>
                                            </div>
                                            <div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.khxkz }}"
                                                                  target="_blank">開戶許可證</a>
                                            </div>
                                        </li>
                                        {{/if}}
                                        {{if datas.companylist.nsrzgb}}
                                        <li>
                                            <div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"
                                                                target="_blank"><img
                                                    src="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"></a>
                                            </div>
                                            <div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.nsrzgb }}"
                                                                  target="_blank">一般納稅人資格表</a>
                                            </div>
                                        </li>
                                        {{/if}}
                                        {{if datas.companylist.swdjz}}
                                        <li>
                                            <div class="pic"><a href="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"
                                                                target="_blank"><img
                                                    src="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"></a>
                                            </div>
                                            <div class="title"><a href="{{imgSiteUrl}}{{ datas.companylist.swdjz }}"
                                                                  target="_blank">稅務登記證</a>
                                            </div>
                                        </li>
                                        {{/if}}
                                    </ul>
                                    <a class="sNext" href="javascript:void(0)"></a>
                                </div>

                            </div><!-- parBd End -->
                        </div>
                    </li>
...

部分js代碼：

 

...
<script>
 /* 內層圖片滾動切換 */
    jQuery(".slideGroup .slideBox").slide({
        mainCell: "ul",
        vis: 3,
        prevCell: ".sPrev",
        nextCell: ".sNext",
        effect: "leftLoop"
    });
</script>
...

 

最終達到的效果：

后記：

希望再次用到寫輪播時，不要像昨天一樣忘得那么“干凈”，要做一個大神前必備技能！