fwslider--属于自己的一个图片轮播插件

拼搏现实的明天。 2022-06-09 09:50 168阅读 0赞

一直在学习，一直在提升，一直在想什么时候自己也能写个简单的图片轮播啊？  
终于，我写出来了，虽然没有别人写的那么牛逼，我也没有办法和大牛比，所以跟自己比就好了，自己有提升就很开心，这个图片轮播写出来一段时间后，都没有封装起来，今天有空就把它封装一下，记录在博客里，以后需要用就直接回来看博客。。。。  
如果有小伙伴喜欢我这个图片轮播插件的也可以拿去用，这个图片轮播真的真的很简单，非常的简单，也非常适合新手去使用。

该插件支持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

写好结构和样式后，直接引入代码即可,再将插件在jq文档就绪方法中构造出来即可。

没有js插件代码的可以直接复制上面的js代码，然后再保存为js文件，再到项目中引入即可！（上面的js代码经过加密的，不影响使用，可以直接拷贝）