Javascript幻燈片顯示最後一張圖片5次

Question

我有一個JavaScript滑塊，可從文件夾中獲取所有圖像。我不知道爲什麼，但它顯示的最後一張圖像是5次，文件夾中的5張圖像沒有顯示。 結論：該文件夾的最後一個圖像顯示在其他人應該在的位置。 我查了很多我的錯誤，但沒有找到它。

<ul id="flexiselDemo3"><!-- max 41 de altura --> 
         <?PHP 
          $directorys = "images/uploads/logos/"; 
          $images = glob($directorys . "*.jpg"); 
          foreach($images as $image) 
          { 
           if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { 
            echo '<li><a href="frmExcludeImage.php?imagename='.$image.'"><img src="'.$image.'" width="150" height="70" /></a></li>'; 
           } else{ 
            echo '<li><img src="'.$image.'" width="150" height="70" /></li>'; 
           } 
          } 
          $imagespng = glob($directorys . "*.png"); 
          foreach($imagespng as $imagepng) 
          { 
           if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { 
            echo '<li><a href="frmExcludeImage.php?imagename='.$image.'"><img src="'.$image.'" width="150" height="70" /></a></li>'; 
           } else{ 
            echo '<li><img src="'.$image.'" width="150" height="70" /></li>'; 
           } 
          } 
         ?> 
        </ul> 
        <script type="text/javascript"> 
         $(window).load(function() { 
          $("#flexiselDemo3").flexisel({ 
           visibleItems: 5, 
           animationSpeed: 1000, 
           autoPlay: true, 
           autoPlaySpeed: 3000,    
           pauseOnHover: true, 
           enableResponsiveBreakpoints: true, 
           responsiveBreakpoints: { 
            portrait: { 
             changePoint:480, 
             visibleItems: 1 
            }, 
            landscape: { 
             changePoint:640, 
             visibleItems: 2 
            }, 
            tablet: { 
             changePoint:768, 
             visibleItems: 3 
            } 
           } 
          }); 

         }); 
        </script> 



/*--testimonial--*/ 
p.ceo { 
    color: #000; 
    font-size: 1em; 
    font-style: normal; 
    margin-top: 3%; 
} 
span.ceo1 { 
    color:#0084ff; 
    font-size: 1em; 
    text-transform: uppercase; 
} 
i.quot { 
    width: 100px; 
    height: 100px; 
    background: url(../images/img-sprite.png)no-repeat #0084FF -432px -313px; 
    display: block; 
    border-radius: 100px; 
    -webkit-border-radius: 100px; 
    -moz-border-radius: 100px; 
    -o-border-radius: 100px; 
    margin: 0 auto; 
} 
.testimonial{ 
    background: #FFFFFF; 
} 
.testimonial_top{ 
    padding: -2% 0; 
    text-align:center; 
} 
p.m_12{ 
    font-style: italic; 
    font-size: 1em; 
    color: #888; 
    line-height: 1.8em; 
    margin-top: 5%; 
} 
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 { 
    display: none; 
} 
.nbs-flexisel-container { 
    position: relative; 
    max-width: 100%; 
    margin-bottom:7%; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    padding: 2.5em 0; 
} 
.nbs-flexisel-ul { 
    position: relative; 
    width: 9999px; 
    margin: 0px; 
    padding: 0px; 
    list-style-type: none; 
    text-align: center; 
} 
.nbs-flexisel-inner { 
    overflow: hidden; 
    width:90%; 
    margin: 0 auto; 
} 
.nbs-flexisel-item { 
    float: left; 
    margin: 0px; 
    padding: 0px; 
    cursor: pointer; 
    position: relative; 
    line-height: 0px; 
} 
.nbs-flexisel-item > img { 
    cursor: pointer; 
    positon: relative; 
    max-width:200px; 
    max-height:120px; 
} 

我在該文件夾中有12個徽標和重定向到主頁面的index.html。 有人可以幫我嗎？

編輯： 這裏是你的第二個foreach jQuery的

/* 
* File: jquery.flexisel.js 
* Version: 1.0.0 
* Description: Responsive carousel jQuery plugin 
* Author: 9bit Studios 
* Copyright 2012, 9bit Studios 
* http://www.9bitstudios.com 
* Free to use and abuse under the MIT license. 
* http://www.opensource.org/licenses/mit-license.php 
*/ 

(function ($) { 

    $.fn.flexisel = function (options) { 

     var defaults = $.extend({ 
      visibleItems: 4, 
      animationSpeed: 200, 
      autoPlay: false, 
      autoPlaySpeed: 3000,    
      pauseOnHover: true, 
      setMaxWidthAndHeight: false, 
      enableResponsiveBreakpoints: false, 
      responsiveBreakpoints: { 
       portrait: { 
        changePoint:480, 
        visibleItems: 1 
       }, 
       landscape: { 
        changePoint:640, 
        visibleItems: 2 
       }, 
       tablet: { 
        changePoint:768, 
        visibleItems: 3 
       } 
      } 
     }, options); 

     /****************************** 
     Private Variables 
     *******************************/   

     var object = $(this); 
     var settings = $.extend(defaults, options);   
     var itemsWidth; // Declare the global width of each item in carousel 
     var canNavigate = true; 
     var itemsVisible = settings.visibleItems; 

     /****************************** 
     Public Methods 
     *******************************/   

     var methods = { 

      init: function() { 

       return this.each(function() { 
        methods.appendHTML(); 
        methods.setEventHandlers();     
        methods.initializeItems(); 
       }); 
      }, 

      /****************************** 
      Initialize Items 
      *******************************/    

      initializeItems: function() { 

       var listParent = object.parent(); 
       var innerHeight = listParent.height(); 
       var childSet = object.children(); 

       var innerWidth = listParent.width(); // Set widths 
       itemsWidth = (innerWidth)/itemsVisible; 
       childSet.width(itemsWidth); 
       childSet.last().insertBefore(childSet.first()); 
       childSet.last().insertBefore(childSet.first()); 
       object.css({'left' : -itemsWidth}); 

       object.fadeIn(); 
       $(window).trigger("resize"); // needed to position arrows correctly 

      }, 


      /****************************** 
      Append HTML 
      *******************************/    

      appendHTML: function() { 

       object.addClass("nbs-flexisel-ul"); 
       object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>"); 
       object.find("li").addClass("nbs-flexisel-item"); 

       if(settings.setMaxWidthAndHeight) { 
        var baseWidth = $(".nbs-flexisel-item > img").width(); 
        var baseHeight = $(".nbs-flexisel-item > img").height(); 
        $(".nbs-flexisel-item > img").css("max-width", baseWidth); 
        $(".nbs-flexisel-item > img").css("max-height", baseHeight); 
       } 

       $("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object); 
       var cloneContent = object.children().clone(); 
       object.append(cloneContent); 
      }, 


      /****************************** 
      Set Event Handlers 
      *******************************/ 
      setEventHandlers: function() { 

       var listParent = object.parent(); 
       var childSet = object.children(); 
       var leftArrow = listParent.find($(".nbs-flexisel-nav-left")); 
       var rightArrow = listParent.find($(".nbs-flexisel-nav-right")); 

       $(window).on("resize", function(event){ 

        methods.setResponsiveEvents(); 

        var innerWidth = $(listParent).width(); 
        var innerHeight = $(listParent).height(); 

        itemsWidth = (innerWidth)/itemsVisible; 

        childSet.width(itemsWidth); 
        object.css({'left' : -itemsWidth}); 

        var halfArrowHeight = (leftArrow.height())/2; 
        var arrowMargin = (innerHeight/2) - halfArrowHeight; 
        leftArrow.css("top", arrowMargin + "px"); 
        rightArrow.css("top", arrowMargin + "px"); 

       });     

       $(leftArrow).on("click", function (event) { 
        methods.scrollLeft(); 
       }); 

       $(rightArrow).on("click", function (event) { 
        methods.scrollRight(); 
       }); 

       if(settings.pauseOnHover == true) { 
        $(".nbs-flexisel-item").on({ 
         mouseenter: function() { 
          canNavigate = false; 
         }, 
         mouseleave: function() { 
          canNavigate = true; 
         } 
        }); 
       } 

       if(settings.autoPlay == true) { 

        setInterval(function() { 
         if(canNavigate == true) 
          methods.scrollRight(); 
        }, settings.autoPlaySpeed); 
       } 

      }, 

      /****************************** 
      Set Responsive Events 
      *******************************/    

      setResponsiveEvents: function() { 
       var contentWidth = $('html').width(); 

       if(settings.enableResponsiveBreakpoints == true) { 
        if(contentWidth < settings.responsiveBreakpoints.portrait.changePoint) { 
         itemsVisible = settings.responsiveBreakpoints.portrait.visibleItems; 
        } 
        else if(contentWidth > settings.responsiveBreakpoints.portrait.changePoint && contentWidth < settings.responsiveBreakpoints.landscape.changePoint) { 
         itemsVisible = settings.responsiveBreakpoints.landscape.visibleItems; 
        } 
        else if(contentWidth > settings.responsiveBreakpoints.landscape.changePoint && contentWidth < settings.responsiveBreakpoints.tablet.changePoint) { 
         itemsVisible = settings.responsiveBreakpoints.tablet.visibleItems; 
        } 
        else { 
         itemsVisible = settings.visibleItems; 
        } 
       } 
      },   

      /****************************** 
      Scroll Left 
      *******************************/     

      scrollLeft:function() { 

       if(canNavigate == true) { 
        canNavigate = false; 

        var listParent = object.parent(); 
        var innerWidth = listParent.width(); 

        itemsWidth = (innerWidth)/itemsVisible; 

        var childSet = object.children(); 

        object.animate({ 
          'left' : "+=" + itemsWidth 
         }, 
         { 
          queue:false, 
          duration:settings.animationSpeed, 
          easing: "linear", 
          complete: function() { 
           childSet.last().insertBefore(childSet.first()); // Get the first list item and put it after the last list item (that's how the infinite effects is made)         
           methods.adjustScroll(); 
           canNavigate = true; 
          } 
         } 
        ); 
       } 
      }, 

      /****************************** 
      Scroll Right 
      *******************************/     

      scrollRight:function() { 

       if(canNavigate == true) { 
        canNavigate = false; 

        var listParent = object.parent(); 
        var innerWidth = listParent.width(); 

        itemsWidth = (innerWidth)/itemsVisible; 

        var childSet = object.children(); 

        object.animate({ 
          'left' : "-=" + itemsWidth 
         }, 
         { 
          queue:false, 
          duration:settings.animationSpeed, 
          easing: "linear", 
          complete: function() { 
           childSet.first().insertAfter(childSet.last()); // Get the first list item and put it after the last list item (that's how the infinite effects is made) 
           methods.adjustScroll(); 
           canNavigate = true; 
          } 
         } 
        ); 
       } 
      }, 

      /****************************** 
      Adjust Scroll 
      *******************************/ 

      adjustScroll: function() { 

       var listParent = object.parent(); 
       var childSet = object.children();    

       var innerWidth = listParent.width(); 
       itemsWidth = (innerWidth)/itemsVisible; 
       childSet.width(itemsWidth); 
       object.css({'left' : -itemsWidth});  
      }   

     }; 

     if (methods[options]) {  // $("#element").pluginName('methodName', 'arg1', 'arg2'); 
      return methods[options].apply(this, Array.prototype.slice.call(arguments, 1)); 
     } else if (typeof options === 'object' || !options) { // $("#element").pluginName({ option: 1, option:2 }); 
      return methods.init.apply(this); 
     } else { 
      $.error('Method "' + method + '" does not exist in flexisel plugin!'); 
     }   
}; 

})(jQuery); 

Answer 1

要調用錯誤的變量。此外，由於您運行相同的代碼，因此最好將兩個數組合並在一起並僅使用一個循環。

$directorys = "images/uploads/logos/"; 
$images = glob($directorys . "*.jpg"); 
$imagespng = glob($directorys . "*.png"); 
foreach(array_merge($images, $imagespng) as $image) { 
    if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { 
     echo '<li><a href="frmExcludeImage.php?imagename='.$image.'"><img src="'.$image.'" width="150" height="70" /></a></li>'; 
    } else{ 
     echo '<li><img src="'.$image.'" width="150" height="70" /></li>'; 
    } 
} 

另一種方法是在第二個循環中使用更正的名稱。

foreach($imagespng as $imagepng) { 
    if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) { 
     echo '<li><a href="frmExcludeImage.php?imagename='.$imagepng.'"><img src="'.$imagepng.'" width="150" height="70" /></a></li>'; 
    } else{ 
     echo '<li><img src="'.$imagepng.'" width="150" height="70" /></li>'; 
    } 
}