我有一个 javascript slider ，可以从一个文件夹中获取所有图像。我不知道为什么，但它显示最后一张图片 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 个 Logo 和一个重定向到主页的 index.html。 有人可以帮帮我吗？
编辑: 这是 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);
最佳答案
您在第二个 foreach 中调用了错误的变量。此外，由于您运行相同的代码，因此最好合并两个数组并只使用一个循环。
$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>';
}
}
关于Javascript 幻灯片显示最后一张图片 5 次，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32343927/