图像上传器和滑块 [英] Image uploader and slider

问题描述

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

All my images upload next to each other rather than seperate images. How to fix?

我有一个500 x 300像素的盒子

I have a 500 x 300 px box

ScreenShot所以你可以看到我的意思

<?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 -->

推荐答案

您正在回应< ; img> 标签进入滑块< div id =slider> 。它们都在div中，并显示出来。

You are echoing the <img> tags into the slider <div id="slider">. They are all inside that div, and displayed.

你可以添加一个样式来初始隐藏它们然后让你的jquery循环逐个显示它们。

You could add a style to initially hide them and then have your jquery loop show them one by one.

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

Also, you probably want to increase the id on each iteration.

类似于：

$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++;
        }
    }

这篇关于图像上传器和滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！