jquery - 如何编写 slider 图像的代码

Question

    <?php 
             $query1="SELECT * FROM user_photos_offline  WHERE ssmid='$ssmid' AND status='1' ORDER BY date_uploaded DESC LIMIT 0,5";
             $sql=mysql_query($query1); 
             $count=mysql_num_rows($sql);   
             $results=array();
             while($row=mysql_fetch_assoc($sql)){
            // $results[]=$row['image'];
            ?>
            <img src="upload_images/<?php echo $row['image']?>" class="img-responsive image" onclick="showImg('upload_images/<?php echo $row['image']?>')">
            <!-- Here i got all images,now it will showing in row by row,but dont want like this,i want i row for and remaining photos are come slider, idont know how to write the code-->
            <?php } ?>

friend 们，我想写图片 slider 的代码，我不知道怎么写 slider 图片的代码，对我来说不需要插件，看下面我解释...

Answer 1

你可以试试下面的代码。

Fiddle

  @keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}

body { margin: 0; } 
div#slider { overflow: hidden; }
div#slider figure img { width: 20%; float: left; }
div#slider figure { 
  position: relative;
  width: 500%;
  margin: 0;
  left: 0;
  text-align: left;
  font-size: 0;
  animation: 30s slidy infinite; 
}

Updated link