如何创建自己的jQuery Slider插件

Create your own jQuery plugin – slider Today we will create own first jQuery plugins. As one of easy task – we will create own image slider (commonly – of any content, not just images). Our slider will switch between slides using the fade effect.

创建您自己的jQuery插件–滑块今天，我们将创建自己的第一个jQuery插件。 作为一项简单的任务，我们将创建自己的图像滑块(通常是所有内容，而不仅仅是图像)。 我们的滑块将使用淡入淡出效果在幻灯片之间切换。

Firstly – you can download our package and check demo:

首先–您可以下载我们的软件包并查看演示：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Lets start coding !

让我们开始编码！

步骤1. HTML (Step 1. HTML)

As usual, we start with the HTML. This is source code of our sample:

和往常一样，我们从HTML开始。 这是我们示例的源代码：

index.html (index.html)

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example">
    <h3><a href="#">My Slider example</a></h3>
    <ul id="my_slider">
      <li><img src="data_images/pic1.jpg" alt="" /></li>
      <li><img src="data_images/pic2.jpg" alt="" /></li>
      <li><img src="data_images/pic3.jpg" alt="" /></li>
      <li><img src="data_images/pic4.jpg" alt="" /></li>
      <li><img src="data_images/pic5.jpg" alt="" /></li>
      <li><img src="data_images/pic6.jpg" alt="" /></li>
      <li><img src="data_images/pic7.jpg" alt="" /></li>
      <li><img src="data_images/pic8.jpg" alt="" /></li>
      <li><img src="data_images/pic9.jpg" alt="" /></li>
      <li><img src="data_images/pic10.jpg" alt="" /></li>
    </ul>
    <div id="counter"></div>
</div>

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<div class="example">
    <h3><a href="#">My Slider example</a></h3>
    <ul id="my_slider">
      <li><img src="data_images/pic1.jpg" alt="" /></li>
      <li><img src="data_images/pic2.jpg" alt="" /></li>
      <li><img src="data_images/pic3.jpg" alt="" /></li>
      <li><img src="data_images/pic4.jpg" alt="" /></li>
      <li><img src="data_images/pic5.jpg" alt="" /></li>
      <li><img src="data_images/pic6.jpg" alt="" /></li>
      <li><img src="data_images/pic7.jpg" alt="" /></li>
      <li><img src="data_images/pic8.jpg" alt="" /></li>
      <li><img src="data_images/pic9.jpg" alt="" /></li>
      <li><img src="data_images/pic10.jpg" alt="" /></li>
    </ul>
    <div id="counter"></div>
</div>

As you can see – all very easy, here are UL-LI structure with slider tabs inside. In end – additional counter element.

如您所见–一切都很简单，这是内部带有滑块的UL-LI结构。 最后–附加的计数器元素。

步骤2. CSS (Step 2. CSS)

Here are used CSS file with styles of our demo:

以下是带有我们演示样式CSS文件：

css / main.css (css/main.css)

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*My slider styles*/
#my_slider {
    width:500px;
    height:340px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
}
#counter {
    text-align:right;
    font-size:16px;
    width:500px;
}

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:500px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
/*My slider styles*/
#my_slider {
    width:500px;
    height:340px;
    overflow: hidden;
    position:relative;
    list-style: none outside none;
    padding:0;
    margin:0;
}
#my_slider li {
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
}
#my_slider li:first-child {
    display:block;
}
#counter {
    text-align:right;
    font-size:16px;
    width:500px;
}

步骤3. JS (Step 3. JS)

Here are all JS files:

这是所有JS文件：

js / main.js (js/main.js)

(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var amount;
        var i;
        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            i++;
            if (i >= amount) i = 0;
            $(slides[i]).fadeIn(1000);
            // updating counter
            cnt.text(i+1+' / '+amount);
            // loop
            setTimeout(run, interval);
        }
        slides = $('#my_slider').children();
        cnt = $('#counter');
        amount = slides.length;
        i=0;
        // updating counter
        cnt.text(i+1+' / '+amount);
        setTimeout(run, interval);
    };
})(jQuery);
// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

(function($){
    $.fn.MySlider = function(interval) {
        var slides;
        var cnt;
        var amount;
        var i;
        function run() {
            // hiding previous image and showing next
            $(slides[i]).fadeOut(1000);
            i++;
            if (i >= amount) i = 0;
            $(slides[i]).fadeIn(1000);
            // updating counter
            cnt.text(i+1+' / '+amount);
            // loop
            setTimeout(run, interval);
        }
        slides = $('#my_slider').children();
        cnt = $('#counter');
        amount = slides.length;
        i=0;
        // updating counter
        cnt.text(i+1+' / '+amount);
        setTimeout(run, interval);
    };
})(jQuery);
// custom initialization
jQuery(window).load(function() {
    $('.smart_gallery').MySlider(3000);
});

Firstly, make attention to $.fn.MySlider, so it mean that I registering my function as new jQuery function (expanding its functions). Then I made simple switching mechanism between images. And, using fadeOut-fadeIn – perform ‘switching’. So, as result, we can call ‘MySlider’ function for any UL element which we want to use as slider. Example: $(‘.smart_gallery’).MySlider(3000); (where 3000 – delay between switching).

首先，请注意$ .fn.MySlider，这意味着我将函数注册为新的jQuery函数(扩展了它的函数)。 然后，我对图像之间进行了简单的切换。 并且，使用fadeOut-fadeIn –执行“切换”。 因此，结果是，我们可以为要用作滑块的任何UL元素调用“ MySlider”函数。 示例：$('。smart_gallery')。MySlider(3000); (其中3000 –切换之间的延迟)。

js / jquery-1.5.2.min.js (js/jquery-1.5.2.min.js)

This is default jQuery library. Available in our package.

这是默认的jQuery库。 在我们的包装中可用。

现场演示

结论 (Conclusion)

Today I told you how to build new own jQuery plugin. Sure that this will useful for you. Our sample result was very easy, and very small. The whole JS code can even be compressed to 284 bytes :) Good luck!

今天，我告诉您如何构建新的jQuery插件。 确保这对您有用。 我们的样本结果非常简单，而且非常小。 整个JS代码甚至可以压缩为284个字节:)祝您好运！

翻译自: https://www.script-tutorials.com/how-to-create-your-own-jquery-slider-plugin/