Javascript幻灯片显示最后一次图像5次

时间:2015-09-02 02:53:57

标签: javascript php jquery html css

我有一个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会重定向到主页面。 有人能帮帮我吗?

编辑: 这是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);

1 个答案:

答案 0 :(得分:1)

您在第二个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>';
    }
}