fwslider--屬於自己的一個圖片輪播插件

一直在學習，一直在提升，一直在想什麼時候自己也能寫個簡單的圖片輪播啊？
終於，我寫出來了，雖然沒有別人寫的那麼牛逼，我也沒有辦法和大牛比，所以跟自己比就好了，自己有提升就很開心，這個圖片輪播寫出來一段時間後，都沒有封裝起來，今天有空就把它封裝一下，記錄在博客裏，以後需要用就直接回來看博客。。。。
如果有小夥伴喜歡我這個圖片輪播插件的也可以拿去用，這個圖片輪播真的真的很簡單，非常的簡單，也非常適合新手去使用。

該插件支持IE10+,chrome,firefox,opera等瀏覽器，該插件也支持響應式！也可以用在移動端，默認支持響應式，默認寬度爲100%，需要使用固定寬度的直接修改外部盒子寬度即可！

不多說廢話了，直接上代碼吧
首先是html結構：

<div class="banner" id="banner">
    <ul id="slider-ul" class="sliderUl">
        <li>
            <a href="#"><img src="images/banner01.jpg" alt="slider1">
                <div class="slider-content">
                    <h3>實現設計的夢想</h3>
                    <p>3D可摺疊封裝</p>
                    <a class="know-more" href="javascript:void(0)">瞭解更多 ></a>
                </div>
            </a></li>
        <li>
            <a href="#"><img src="images/banner02.jpg" alt="slider2">
                <div class="slider-content">
                    <div class="r-float">
                        <h3>精益製造 您準備好了嗎？</h3>
                        <a class="know-more" href="javascript:void(0)">瞭解更多 ></a>
                    </div>
                </div>
            </a></li>
        <li><a href="#"><img src="images/banner03.jpg" alt="slider3">
            <div class="slider-content">
                <h3 class="bannerli2">工廠智能化與工業4.0</h3>
                <a class="know-more" href="javascript:void(0)">瞭解更多 ></a>
            </div>
        </a></li>
        <li><a href="#"><img src="images/banner04.jpg" alt="slider4">
            <div class="slider-content">
                <h3><span class="white-font">製造服務</span>細微的關懷</h3>
                <a class="know-more" href="javascript:void(0)">瞭解更多 ></a>
            </div>
        </a></li>
        <span class="arrow-left" id="arrow-left"></span><span class="arrow-right" id="arrow-right"></span>
    </ul>
</div>

結構很簡單，代碼也通俗易懂，就不做解釋了

接着就是寫樣式了：

*{margin:0;padding:0}
.l-float{float:left}
.r-float{float:right}
.banner{position:relative;overflow:hidden;width:100%;height:287px}
.banner .sliderUl,.banner .sliderUl li{position:absolute;width:100%;height:100%}
.banner .sliderUl li{top:0;left:0;opacity:0;-webkit-transition:opacity 2s;transition:opacity 2s}
.banner .sliderUl li img{position:absolute;top:0;left:0;z-index:-2;width:100%;height:100%}
.banner .sliderUl li a{text-decoration:none}
.banner .sliderUl li .slider-content{z-index:10;margin:auto;padding-left:4px;width:1238px;height:287px}
.banner .sliderUl li .slider-content h3{padding:60px 0 0;color:#eb6100;font-size:35px}
.banner .sliderUl li .slider-content p{padding-top:15px;color:#fff;font-weight:700;font-size:20px}
.banner .sliderUl li .slider-content .know-more{z-index:2;display:block;margin-top:23px;width:91px;height:31px;background-color:#eb6100;color:#fff;text-align:center;font-size:14px;line-height:31px;cursor:pointer}
.banner .sliderUl li .slider-content .know-more:hover{cursor:pointer}
.banner .sliderPoint{position:absolute;bottom:14px;margin:auto;text-align:center}
.banner .sliderPoint li{float:left;display:block;margin:0 3px;padding:0 1px;width:8px;height:10px;border:1px solid #e60044;border-radius:50px;text-align:center;text-indent:999px;line-height:17px}
.banner .sliderPoint li:hover{cursor:pointer}
.banner .sliderPoint .pointActice{background-color:#e60044}
.banner .sliderUl li .slider-content .bannerli2,.white-font{color:#fff}
.sliderUl .arrow-left,.sliderUl .arrow-right{position:absolute;top:111px;display:block;width:2pc;height:4pc;cursor:pointer}
.sliderUl .arrow-left{left:0;background:url(../images/arrow.png) no-repeat 0 0}
.sliderUl .arrow-left:hover{background:url(../images/arrow.png) no-repeat -5pc 0}
.sliderUl .arrow-right{right:0;background:url(../images/arrow.png) no-repeat -1px -130px}
.sliderUl .arrow-right:hover{right:0;background:url(../images/arrow.png) no-repeat -81px -130px}

寫完樣式就值得提一下這裏的問題了，首先是上面的html結構，裏面有兩個span是用來做輪播圖的兩邊的導航的，不需要也可以不加，加上去以後只是顯示出來而已，具體功能還需要在js插件裏傳參，打開功能，這裏後面會講清楚。

在這份css樣式中，已經編寫好了輪播圖的底部圓點導航的樣式了，而我們也只是需要寫出這份樣式就行，不用在html結構中再添加標籤，js插件會動態生成html結構，具體結構可以在瀏覽器運行的時候按f12調出控制檯來查看。
樣式中的這部分就是圓點導航的樣式：

.banner .sliderPoint{position:absolute;bottom:14px;margin:auto;text-align:center}
.banner .sliderPoint li{float:left;display:block;margin:0 3px;padding:0 1px;width:8px;height:10px;border:1px solid #e60044;border-radius:50px;text-align:center;text-indent:999px;line-height:17px}
.banner .sliderPoint li:hover{cursor:pointer}
.banner .sliderPoint .pointActice{background-color:#e60044}
.banner .sliderUl li .slider-content .bannerli2,.white-font{color:#fff}

其中還有一點需要提醒大家，圓點是使用css3實現的，部分瀏覽器不支持css3的屬性，小夥伴也可以自己使用背景圖來實現。

接下來就是核心JS部分：

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('3 Z=5(g,h,j){3 l=6;3 n=6;3 o=6;4(g!=""||!g!=6){l=g}x{l=M}4(h!=""||h!=6){n=h}x{n=1c}4(j!=""||j!=6){o=j}x{o=M}3 p=$("#1b");3 q=p.z("#F-B");3 r=0;3 s=6;3 t=p.K();3 u=6;3 v=q.z("C");v.y(0).9("8","1");5 L(){4(o){3 b=$("<B></B>");b.N("V","13").N("12","F-J");H(3 i=0;i<v.7;i++){3 c=$("<C></C>");3 d=Y.X(i+1);c.E(d);b.E(c)}p.E(b);u=$("B#F-J C");3 e=b.K();3 f=(t/2)-(e/2);b.9("O",f);u.y(0).P("Q");H(3 k=0;k<u.7;k++){u.y(k).G(5(){3 a=6;a=$(U).W()||$(U).14();A(s);w(a-1)})}}x{}}L();5 I(){q.10=5(){A(s)};q.11=5(){D()}}I();5 S(a){4(a){3 b=q.z("#R-O");3 c=q.z("#R-15");c.9("8",0);b.9("8",0);p.16(5(){c.9("8",1);b.9("8",1)});p.17(5(){c.9("8",0);b.9("8",0)});b.G(5(){A(s);4(r==0){r=v.7;w(r)}4(r!=0||r<v.7-1){r--;w(r)}x{r--;w(r)}});c.G(5(){A(s);4(r<v.7-1){r++;w(r)}x 4(r==v.7-1){r=0;w(r)}})}x{18.19("左右導航未開啓！")}}S(l);5 D(){s=1a(5(){4(r<v.7){w(r);r++}4(r==v.7){r=0}},n)}D();5 w(m){H(3 i=0;i<v.7;i++){4(i==m){4(o){u.y(i).P("Q")}v.y(i).T({8:1})}x{4(o){u.y(i).1d()}v.y(i).T({8:0})}}}}',62,76,'|||var|if|function|null|length|opacity|css|||||||||||||||||||||||checkWhichLi|else|eq|find|clearInterval|ul|li|Goslider|append|slider|click|for|mouseoverf|point|width|cretePoint|false|attr|left|addClass|pointActice|arrow|open_arrow|animate|this|class|text|createTextNode|document|fwslider|onmouseover|onmouseout|id|sliderPoint|html|right|mouseover|mouseout|console|log|setInterval|banner|4000|removeClass'.split('|'),0,{}))

這段js代碼就是插件的核心，具體使用方法看下面：
使用插件之前一定需要先引用jquery插件，再引入輪播圖插件，因爲輪播圖插件是基於jq寫的！
在使用之前先說明一下，這個插件只是支持三個參數，
第一個參數是：是否啓用左右兩邊的導航功能，可選值爲true和false,默認爲false
第二個參數是：控制輪播圖的速度，默認值4000，即4s
第三個參數是：是否啓用底部圓點導航功能，可選值爲true和false,默認爲false

<script src="js/jquery1.42.min.js"></script>
<script src="js/lfwslider-mini.js"></script>
<script>
$(function(){
    new fwslider(true,4000,true);
})
</script>

寫好結構和樣式後，直接引入代碼即可,再將插件在jq文檔就緒方法中構造出來即可。

沒有js插件代碼的可以直接複製上面的js代碼，然後再保存爲js文件，再到項目中引入即可！（上面的js代碼經過加密的，不影響使用，可以直接拷貝）