jQuery封装插件

转自:https://blog.csdn.net/osdfhv/article/details/53185914

(function ($) {
    $.fn.m​​yPlugin = function () {

        //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
        //$(this)等同于 $($('#element'));

        this.fadeIn('normal', function () {

            //此处callback函数中this关键字代表一个DOM元素

        });
        //return this;
    };
})(jQuery);

$('#element').myPlugin();

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 jQuery 封装插件轮播图的完整代码,可以自定义每张图片的停留时间: HTML: ``` <div class="slider"> <div class="slider-wrapper"> <img src="img/img1.jpg" alt="image1"> <img src="img/img2.jpg" alt="image2"> <img src="img/img3.jpg" alt="image3"> </div> </div> ``` CSS: ``` .slider { width: 100%; overflow: hidden; position: relative; } .slider-wrapper { width: 300%; position: relative; left: 0; transition: left 0.5s; } .slider-wrapper img { width: 33.33%; float: left; } .slider .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; background-color: #000; color: #fff; text-align: center; font-size: 20px; line-height: 30px; cursor: pointer; border-radius: 50%; z-index: 1; } .slider .slider-btn.left { left: 20px; } .slider .slider-btn.right { right: 20px; } ``` JavaScript: ``` (function($) { $.fn.slider = function(options) { var settings = $.extend({ delay: 3000 }, options); var slider = this; var wrapper = slider.find('.slider-wrapper'); var images = wrapper.find('img'); var numImages = images.length; var imageWidth = 100 / numImages; var currentImage = 1; var interval; function init() { wrapper.css('width', numImages * 100 + '%'); images.css('width', imageWidth + '%'); slider.append('<div class="slider-btn left">‹</div><div class="slider-btn right">›</div>'); slider.find('.slider-btn').on('click', function() { var direction = $(this).hasClass('left') ? -1 : 1; changeImage(currentImage + direction); }); startSlider(); } function startSlider() { interval = setInterval(function() { changeImage(currentImage + 1); }, settings.delay); } function stopSlider() { clearInterval(interval); } function changeImage(index) { if (index < 1) { index = numImages; } else if (index > numImages) { index = 1; } var left = (index - 1) * -100 / numImages; wrapper.css('left', left + '%'); currentImage = index; } init(); slider.hover(function() { stopSlider(); }, function() { startSlider(); }); }; }(jQuery)); $('.slider').slider({ delay: 4000 }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值