• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

基于jQuery写的一个网页背景切换(jquery.bgSlide.js)的插件

JQuery 神棍 531℃ 0评论

在网上看见不少的大牛们的主页,背景都是随机切换图片的,你刷新也是随机的,看起来特别酷的样子
然后,昨天大姐找到我说,想写一个这样的功能,最后,这个插件就撸了出来,可能当中有一些不足之处,望各位大牛,多多指教!

效果什么的,一定会完善,现在只有一个淡入淡出的效果,不多说,请看代码!

/**
 * Created by Falost on 2016/4/1.
 * Name:jQuert.bgSlide.js
 */
(function ($) {
  $.fn.bgSlide = function (options) {
    var defaults = {
      bgs: [],//储存背景
      model: 'default', //可选项 custom
      max: 13,//切换的个数
      bg: 0,//当前的位置
      times: 5000,//切换时间
      speed: 'fast', // 可换为 mormal  , slow
      opacity: 0.4,//透明度
      abs: this, //默认参数请勿修改,除非你已知他的用处
      arr: [],//请勿修改,缓存区
      url: ''
    };
    var ops = $.extend(defaults, options);
    if (ops.model == 'custom') {
      ops.max = ops.bgs.length
    }
    var fn = {
      rand: function () {
        ops.bg = parseInt(Math.random() * ops.max);
        return ops.bg;
      },
      time: function () {
        setInterval(function () {
          fn.isChangeBg();
        }, ops.times)
      },
      contains: function (arr, obj) {
        var i = arr.length;
        while (i--) {
          if (arr[i] === obj) {
            return true;
          }
        }
        return false;
      },
      isChangeBg: function () {
        fn.rand();
        if (ops.model == 'default') {
          if (ops.bgs.length == ops.max) {
            ops.bgs = [];
          }
          if (fn.contains(ops.bgs, ops.bg)) {
            fn.isChangeBg()
          } else {
            ops.bgs.push(ops.bg);
            fn.changeBg();
          }
        } else if (ops.model == 'custom') {
          if (ops.arr.length == ops.max) {
            ops.arr = [];
          }
          if (fn.contains(ops.arr, ops.bg)) {
            fn.isChangeBg()
          } else {
            ops.arr.push(ops.bg);
            fn.changeBg();
          }
        }
        //console.log(this)
      },
      changeBg: function () {
        switch(ops.model){
          case 'default':
            ops.url = 'url("./staic/images/index/bg' + ops.bg + '.jpg")';
            break;
          case 'custom':
            ops.url = 'url("' + ops.bgs[ops.bg] + '")';
            break;
        }
        $(ops.abs).fadeTo(ops.speed, ops.opacity, function () {
          $(ops.abs).css({
            'background-image': ops.url,
            'background-size': '100%',
            'background-position':'fixed',
            'background-repeat':'no-repeat',
            '-webkit-transition': 'background-image 0.5s',
            '-moz-transition': 'background-image 0.5s',
            '-ms-transition': 'background-image 0.5s',
            '-o-transition': 'background-image 0.5s',
            'transition': 'background-image 0.5s'
          });
        });
      }
    };
    fn.isChangeBg();
    fn.time();
    //console.log(ops.bg, ops.model, ops.url)
  };
})(jQuery);

HTML中只需引入这个JS文件就可以了

jquery.bgSlide.js

引用代码,可以自定义的哦!

$('body').bgSlide();

演示地址

如有不足,或者疑问,请在下面留言即可!

原文:http://bbs.fedte.cc/thread-116-1-1.html

转载请注明:Falost的小窝 » 基于jQuery写的一个网页背景切换(jquery.bgSlide.js)的插件

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (9)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址