以幻灯片方式显示多个图像

时间:2013-03-08 00:55:25

标签: php javascript html css3

我正在玩滑块表演,我想学习如何让我的图片在框中向左或向右滑动。

Bellow代码正在显示图像,但我想知道如何使其向一个方向移动,一次显示3-4张图像。您知道服装店如何始终显示最新项目的滑块(一次多个图像)。所以我想知道如何做到这一点。 谢谢你们,

<?php
include('includes/connect.php');        
$sql = mysql_query("SELECT * FROM partnerlogos"); 
 ?>
 <div class="modal" style="margin-left:0px;width:100%">
 <?php
while($row = mysql_fetch_array($sql)){
?>
   <a href="<?php echo $row['company_url']; ?>">
        <img width="140" height="70" src="<?php echo $row['logo_url']; ?>" />
   </a>
<?php }?>

</div>

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:-1)

<?php
//so LIISTEN CAREFULLY
/*
we have to TABLE  in data base first one is 'emglish'->where article is added
and second TABLE is 'images' where we will insert ARTICLE id which is called 'artid' also insert 'id' which is picture id and 'fullname' which is image name 
which has changed name with str_shuffle(). 
*/
//this is where you enter article and upload images--->         
$form = '
        <center>
            <form action="" method="POST" id="form" enctype="multipart/form-data">
            <br><p>title: </p><input type="text" name="title" class="inputadtext" id="d" /><br><br>
            <input type="file" name="files[]" multiple /><br><br>
            <p>short story:</p><textarea cols="60" rows="10" name="shortstory"   class="inputadtext"></textarea><br><br>
            <p>full story: </p><textarea cols="60" rows="20" name="fullstory" class="inputadtext"></textarea><br><br>
                        <input type="submit" name="submit" value="Add Tour" class="inputadtext" />
            </form>
            </center>
        ';
        if(isset($_POST['submit'])){
            $title = mysql_real_escape_string($_POST['title']);
            $short_story = mysql_real_escape_string($_POST['shortstory']);
            $full_story = mysql_real_escape_string($_POST['fullstory']);
            if($title && $short_story && $full_story){
                mysql_query("INSERT INTO emglish VALUES ('', '$title', '$short_story', '$full_story', '', 'en','','')");
                $query = mysql_query("SELECT id FROM emglish WHERE title='$title'");
                $fetch = mysql_fetch_assoc($query);
                $id = $fetch['id'];
                $files = $_FILES['files'];
                    foreach($files['name'] as $p=>$n){
                        $type = $files['type'][$p];
                        $subtype = substr($type, 6);
                        $tmp = $files['tmp_name'][$p];
                        #$hashedname = md5(md5($name));
                        $title = $_POST['title'];
                        /**/
                        $string="qwertyuiopasdfghjklzxcvbnm1234567890";
                        $hashedname = str_shuffle($string);
                        $fullname = $hashedname . ".$subtype";
                        if($subtype=="jpeg" or $subtype=="jpg" or $subtype=="png"){
                        #inserting IMAGE NAME into text
                        mysql_query("INSERT INTO images VALUES ('$fullname', '', '$id')") or die(mysql_error());
                        move_uploaded_file($tmp, "../upload/".$fullname);
                    echo "<span style='float:left;margin-left:30px;'><img width='100px' height='100px' src='../upload/$fullname'><br><span style='color:skyblue;'><b>Upload complete</b></span></span></center>";
                        }else
                            echo "<center><span style='color:red'><b>Not an Image</b></span> <b>$n</b>";
                    }
/*
   after that you are echoing your pictures and article title...
   for css you have to give them classs and not an IDs i mean container and header which is decleared in the following code....
*/
        $q = mysql_query("SELECT * FROM emglish WHERE lang='$lang' order by id DESC");
        while($fetch = mysql_fetch_array($q)){
        echo "<span id='showarticle'>";
         $dbtitle = $fetch['title'];
         $id=$fetch['id'];
         $subtitle = mb_substr($dbtitle, 0, 70) . '...';
        $pic_query = mysql_query("SELECT * FROM images WHERE artid='$id'");
        echo "<p style='margin-bottom:8px;float:left;width:540px;word-wrap:break-word;'><a href='./index.php?page=fullstory&id=$id&lang=$lang'><b>" . $subtitle . "</a></b></p>";
        echo "<a href='./index.php?page=fullstory&id=$id&lang=$lang'>";
        echo "<b>" . $f['title'] . "</b><br><br>";
        echo "<center><div class='container2'>
            <div class='header3'>
        ";
            while($pic_fetch = mysql_fetch_array($pic_query)){
            $picture = $pic_fetch['fullname'];
            echo "<img style='width:400px;height:400px;border-radius:5px;' src='./upload/". $picture ."'  />";
            }
        echo "</div></div></center>";
        echo "</a>";
        echo "</span>";
/*
after that you can cycle this image and this slider with jquery cycle plugin....
*/
?>