如何编写滑块图像的代码

时间:2015-10-03 07:47:05

标签: jquery css3

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

朋友们,我想为图像滑块编写代码,我不知道如何编写滑块图像的代码,对我来说不需要插件,请参阅下面我解释的......

1 个答案:

答案 0 :(得分:0)

您可以尝试使用以下代码。

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