我需要做一个插件，将生效的用户选择

I need to make a plugin that will take effect the user chooses

本文关键字：选择 用户 插件 一个      更新时间：2023-09-26

我正在开发一个jquery插件，我遇到的问题是，当尝试通过设置时，我尝试设置的三个选项中的两个工作。当我想通过"淡出"效果不显示我任何东西，并停止工作。这是我的代码:

// JavaScript Document
jQuery.fn.slider = function(opciones) {
  var configuracion = {
    efecto: "fadeIn",
    velocidadEfecto: 1000,
    tiempoPausa: 3000
  }
  jQuery.extend(configuracion, opciones);
  this.each(function() {
    elem = $(this);
    elem.find('div:gt(0)').hide();
    //$('#imagenes div:gt(0)').hide();
    setInterval(function() {
      elem.find('div:first-child').fadeOut(0)
        .next('div')[configuracion.efecto](configuracion.velocidadEfecto)
        .end().appendTo('#imagenes');
    }, configuracion.tiempoPausa);
  });

  return this;
};
#imagenes {
  width: 200px;
  height: 200px;
  border: 1px solid grey;
  position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Documento sin título</title>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#imagenes").slider({
        efecto: "slideUp",
        velocidadEfecto: 2000,
        tiempoPausa: 4000
      })
    });
  </script>
</head>
<body>
  <h2>Slider</h2>
  <div id="imagenes">
    <div>
      <img src="http://www.bizreport.com/2011/02/03/android-logo-200x200.jpg" id="foto1" />
    </div>
    <div>
      <img src="http://davidnaylor.org/temp/firefox-logo-200x200.png" id="foto2" />
    </div>
    <div>
      <img src="http://tech21info.com/admin/wp-content/uploads/2013/03/chrome-logo-200x200.png" id="foto3" />
    </div>
  </div>
</body>
</html>

我不明白为什么"slideUp"效果不起作用。谢谢你！

问候!: -)

您可以通过字符串名称引用方法和属性，例如您的示例中的"fadeIn"，但您必须使用括号[]符号，而不是点. 

setInterval(function() {
  elem.find('div:first-child').fadeOut(0)
    .next('div')[configuracion.efecto](configuracion.velocidadEfecto)
    .end().appendTo('#imagenes');
}, configuracion.tiempoPausa);

如果你不使用括号，Javascript将在next('div')对象上寻找configuracion属性，并附带efecto方法(事实并非如此)。使用括号计算出.next('div')['fadeIn'](configuracion.velocidadEfecto)，因为configuracion.efecto被求值为它的字符串值。

相关文章：