图片上传器和滑块

Question

我所有的图片都是并排上传的，而不是单独上传的。如何解决？

我有一个 500 x 300 像素的框

<?php
    if(isset($_FILES['ImageUpload'])){
        // if the form has been submitted
        $imageName = $_FILES['ImageUpload']['name'];
        $imageTemp = $_FILES['ImageUpload']['tmp_name'];
        $imageType = $_FILES['ImageUpload']['type'];
        // filter image name
        $imageName = preg_replace("#[^a-z0-9.]#i","",$imageName);

        // error handling
        if(!$imageName){
            echo("Please select a file to upload");
        }else{
            move_uploaded_file($imageTemp, "uploads/$imageName");
        }
    }

?>

<style type="text/css">
    #slider{
        width:500px;
        height:300px;
        overflow:hidden;
        margin:30px auto;
        border:2px solid grey;
    /*  background-image:url(images/Progress.gif); */
        background-repeat:no-repeat;
        background-position:center;
    }

</style>

<script type="text/javascript" src="includes/js/jquery.js"></script>

<script type="text/javascript">
    sliderInt = 1;
    sliderNext = 2;

    $(document).ready(function() {
        $("#slider > img#1").fadeIn(300);
        startSlider();
    });

    function startSlider(){
        count = $("#slider > img").size();
        loop = setInterval(function(){

            if(sliderNext > count){
                sliderNext = 1;
                sliderInt =1;
            }

            $("#slider > img").fadeOut(300);
            $("#slider > img#" + sliderNext).fadeIn(300);

            sliderInt = sliderNext;
            sliderNext = sliderNext +1;

        }, 3000)    
    }


</script>


<form action="slider_custom.php" id="uploadsForm" method="POST" enctype="multipart/form-data">

    <input type="file" name="ImageUpload"/> Select a file to upload... <br/><br/>

    <input type="submit" value="Upload"/>

</form>


<div id="slider">


    <?php
        $imageDisplay = "";
        $images = scandir("uploads");
        $ignore = array(".","..");
        $i = '1';
        foreach($images as $file){
            if(!in_array($file, $ignore)){
                $imageDisplay .= '<img id="1" src="uploads/'.$file.'" border="0"/>';
                $i++;
            }
        }

        echo($imageDisplay);
    ?>
</div><!-- end .slider -->

Answer 1

您正在将 <img> 标签回显到滑块 <div id="slider"> 中。它们都在 div 内并显示出来。

您可以添加一种样式来最初隐藏它们，然后让您的 jquery 循环一个一个地显示它们。

此外，您可能希望在每次迭代时增加 id。

类似于：

$i = 1; // no need for quotes here
foreach($images as $file){
        if(!in_array($file, $ignore)){
            $imageDisplay .= '<img style="display:none" id="'.$i.'" src="uploads/'
                             .$file.'" border="0"/>';
            $i++;
        }
    }

图片上传器和滑块

Image uploader and slider

html

php

jquery

image

uploader