如何编写jquery插件之轮播图

最新推荐文章于 2024-07-03 12:55:44 发布

遛狗的代码

最新推荐文章于 2024-07-03 12:55:44 发布

阅读量3.6k

点赞数 3

分类专栏： Web前端

本文链接：https://blog.csdn.net/Brave_Coder/article/details/52227983

版权

Web前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

对于一位合格的前端开发人员来说，首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。

首先必须要聊到的jquery为我们提供的两大扩展方法，$.fn和$.extend(),$.extend相当于为jQuery类（注意，JavaScript并没有类，我们只是以类来理解这种做法）添加静态方法，

$.fn其实就是jQuery.prototype，原型，对于新手比较难解的概念，可以简单的理解为，我更改了印章，印章印出来的每个印记都会受到印章的影响，可谓釜底抽薪，JavaScript原型链相对较为复杂，JavaScript的继承特性便是基于原型实现的，在编写大规模的JavaScript代码的时候，以面向对象的方式编写才会显得有价值，我们在此不赘述。

好了，我们有了上述的知识储备，我们开始编写轮播插件。

<!DOCTYPE html>
<html lang="en">

<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="main.css" rel="stylesheet">
    <script src="./js/jquery-1.10.2.min.js"></script>
    <script src="./js/jquery.slider.js"></script>
    <script src="./js/main.js"></script>
</head>

<body>
    <div class="slider">
        <div class="slider_img">
            <a class="slider-active" href="#" style="background: url(./img/nav1.jpg) 50% no-repeat; background-size: cover; opacity: 1;"></a>
            <a href="#" style="background: url(./img/nav2.jpg) 50% no-repeat; background-size: cover;"></a>
            <a href="#" style="background: url(./img/nav3.jpg) 50% no-repeat; background-size: cover;"></a>
            <a href="#" style="background: url(./img/nav4.jpg) 50% no-repeat; background-size: cover;"></a>
            <a href="#" style="background: url(./img/nav5.jpg) 50% no-repeat; background-size: cover;"></a>
        </div>
        <span id="left" class="arrow-icon"><<</span>
        <span id="right" class="arrow-icon">>></span>
        <div class="slider_icon">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
</body>

</html>

这是HTML代码的结构，需要一个向左，一个向右按钮和对应轮播图片数目的icon按钮，建议大家用a标签设置图片的容器，比较好操作。

CSS我就不贴了，之后我会将其上传。

最重要的是JavaScript代码:

(function($) {

    $.fn.slider = function(options) {

        //this指向当前的选择器

        var config = {
            index: 0,
            timer: null,
            speed: 3000,
            min: 0.3, //和css中的样式对应
            max: 1
        };

        var opts = $.extend(config, options);

        //核心方法，把当前index的图片和icon显示，把除此之外的图片和icon隐藏
        var core = function() {
            if (opts.index > 4) {
                opts.index = 0;
            } else if (opts.index < 0) {
                opts.index = 4;
            }
            $(".slider_icon span").eq(opts.index).addClass("active").siblings("span").removeClass("active");
            $(".slider_img a").eq(opts.index).css("display", "block").stop().animate({ "opacity": opts.max }, 1000).siblings("a").css({ "display": "none", "opacity": opts.min });
        };
        //左边
        $(this).find("#left").bind("click", function() {
            --opts.index;
            core();
        });

        //右边
        $(this).find("#right").bind("click", function() {
            ++opts.index;
            core();
        });

        //每个icon分配事件
        $(this).find(".slider_icon").on("click", "span", function() {
            var index = $(this).index();
            opts.index = index;
            core();
        });

        //定时器

        var start = function() {
            opts.timer = setInterval(function() {
                ++opts.index;
                core();
            }, opts.speed);
        }



        $(this).hover(function() {
            clearInterval(opts.timer);
        }, function() {
            start();
        });


        start();

    }
}(jQuery));

1:core方法，其实图片轮播的本质就是把当前索引的图片显示，导航icon高亮，其余的隐藏，我做的是淡入淡出。

2：向左，向右，导航其实无非就是index的改变，jquery提供了一个index()方法，可以获得所有匹配元素中当前元素的索引，从0开始。

3：定时器，要实现图片的自动导航，无非就是每隔一定的时间，index+1。另外，当鼠标放入的时候，要清楚定时器，当输入移出的时候，再开启定时器。

以上三点就是轮播的核心要点，任何轮播图都不会脱离这个编程模式。

最后，小的奉上自己的轮播插件，忘大神轻喷。

遛狗的代码

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
如何编写jquery插件之轮播图

对于一位合格的前端开发人员来说，首页图片轮播可谓是必会的基本功。那么我们聊一聊如何用jquery封装自己的轮播插件。首先必须要聊到的jquery为我们提供的两大扩展方法，$.fn和$.extend(),$.extend相当于为jQuery类（注意，JavaScript并没有类，我们只是以类来理解这种做法）添加静态方法，$.fn其实就是jQuery.prototype，原型，对于新手比较难解
复制链接

扫一扫

专栏目录