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">