4

我知道这将是一个简单的问题，但我整天都在寻找它并努力寻找答案，所以希望你们这些优秀的人能够提供帮助。

我创建了自己的 javascript 函数，使用 jQuery 创建幻灯片。我知道有很多免费的可供我使用，但我尝试的少数几个不允许在同一页面上显示多个幻灯片，这让我认为这不应该太难做到。

在页面上，我有 2 个包含图像的 div 元素

<div class="slider">
    <img src="./images/Hashimadisaster.png" alt="" title="Hashima Island" class="alignnone size-full wp-image-842">
    <img src="./images/DSCN3674-1024x767.jpg" alt="" title="Legs glued together" class="alignnone size-large wp-image-834">
    <img src="./images/DSCN3672-768x1024.jpg" alt="" title="The front and rear legs together standing on an Eldar Falcon" class="alignnone size-large wp-image-836">
    <img src="./images/DSCN3671-1024x768.jpg" alt="" title="Left rear leg glued into position and balanced to stand on its own" class="alignnone size-large wp-image-835">
    <img src="./images/conseptiual-drawing-for-titan-base-1024x609.jpg" alt="Conceptual drawing for titan base" title="Conceptual drawing for titan base" class="alignnone size-large wp-image-841">
</div>

和javascript代码

1. function slidermethod(){
2.  var HeightOfBox= 400;
3.  var timeoutmilliseconds = 3000;
4.  if($('.slider').length){
5.      $('.slider').each(function(){
6.          $(this).css("position","relative");
7.          $(this).children('img').css("position","absolute").css("top","0").css("left","0");  
8.          if($(this).children('img').length){
9.              if($(this).children(".currentslide").length == 0){
10.                 //alert($(this).children("img").length);
11.                 //alert("1");
12.                 // this seems to occur every time it is called
13.                    $(this).children('img:first').addClass(".currentslide");
14.             }
15.             else{
16.                 if($(this).children('.currentslide').next().length)    {    
17.                     alert("2");
18.                     var nextchild = $(this).children('.currentslide').next();
19.                     $(this).children('img').removeClass('.currentslide');
20.                     $(nextchild).addClass(".currentslide");
21.                 }else{                  
22.                     alert("3");
23.                     $(this).children('img').removeClass('.currentslide');
24.                     $(this).children('img:first').addClass(".currentslide");
25.                 }
26.             }               
27.         }
28.         $(this).children('img').css("height",HeightOfBox + "px");
29.         $(this).css("height",HeightOfBox + "px");           
30.     });
31.     setTimeout("slidermethod();",timeoutmilliseconds); 
32.        // every 3 seconds call this method
33. }   
34.}
35.slidermethod(); // call the method

代码运行没有任何错误弹出并抓取所有图像，调整它们的大小并将它们放在另一个之上。我有一个 css 样式表，其中 .currentslide 为 z-index:2; 和所有其他图像为 1。但是当它到达代码的底部时，有一个 settimeout() 会在 3 秒后再次调用相同的方法，但它似乎总是进入 if 语句 

9.    if($(this).children(".currentslide").length == 0){

但是如果我对它进行firebug，我可以看到图像组中的第一个图像具有“currentslide”类，所以这不应该是0。不太确定为什么它不能按预期工作。

4

2 回答 2

4

这里有一个错误

.addClass(".currentslide")

应该

.addClass("currentslide")

在你所有的 addclass/removeclass 你犯了同样的错误

以及启动插件的更好路径

$.fn.extend({

    slider : function() {
       $(this).each(function() {
           var $sldr=$(this);

            $sldr.css("position","relative")
                 .find("img").css("position","absolute").css("top","0").css("left","0").end()
                 .find("img:first-child").addClass("currentslide").end()

                .on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  });        
                 setTimeout(function(){$sldr.trigger("nextslide"),3000 });
        });
   return this;
   }
});
   $(".slider").slider();

编辑添加我复制了你的代码，但你应该在你的 css 文件中移动这些 css 属性，它们不需要在插件中设置，所以它会变成

$sldr.on("nextslide",function() {
                        var $current = $sldr.find(".currentslide").removeClass("currentslide")
                        if ($current.next().get(0)) $current.next().addClass("currentslide") 
                        else    $sldr.find("img:first-child").addClass("currentslide")

                  }).find("img:first-child").addClass("currentslide");
于 2013-01-10T13:10:10.443 回答
2

检查失败的原因是 .children() 返回 0。

改为执行以下操作：

if($('.slider img').hasClass('currentslide').length < 1){ /*your code*/ }

我同意米卡昆。你肯定会通过调用 $(this) 大量跳入 DOM。将 $('.slider') 设置为变量并在需要的地方使用该变量。

于 2013-01-10T13:06:46.370 回答