执行多个插入查询(Executing multiple insert queries)

 从你的代码解释给我的上面，它看起来像滑块的每个幻灯片将成为一个图像。 如果是这样，我建议将滑块更改为以下代码： 
 
 代码片段： 
 
 
 
 
 
  
.slider {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}

.slider figure img {
  width: 25%;
  float: left;
  height: auto;
}

.slider figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite;
  -webkit-animation: 10s slide infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}
 
  
<div class="slider">
  <figure>
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg">
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg">
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg">
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg">
  </figure>
</div>
 
 
 
 
 
 我们可以使用实际的img标签，而不是每次都有特定的DIV调用您的img类。 除此之外，在这种方法中，我使用了keyframes CSS来控制幻灯片图像的位置。 
 
 如果你真的想用div内容来控制它，你可以简单地将图片包装到你的div ，并将类.slider figure img .slider figure div以包含其他类型的内容。 
 
 我希望这能帮助你做出努力。 

From what your code is explaining to me above it looks like each slide of your slider is going to be an image. If so, I recommend altering your slider to the following code below: 
 
CODE SNIPPET: 
 
 
 
 
 
  
.slider {
  width: 100%;
  max-width: 960px;
  overflow: hidden;
}

.slider figure img {
  width: 25%;
  float: left;
  height: auto;
}

.slider figure {
  width: 400%;
  position: relative;
  margin: 0;
  padding: 0;
  animation: 10s slide infinite;
  -webkit-animation: 10s slide infinite;
}

@-webkit-keyframes slide {
  0% {
    left: 0%;
  }
  16% {
    left: 0%;
  }
  33% {
    left: -100%;
  }
  49% {
    left: -100%;
  }
  66% {
    left: -200%;
  }
  82% {
    left: -200%;
  }
  100% {
    left: -300%;
  }
}
 
  
<div class="slider">
  <figure>
    <img src="https://i.ytimg.com/vi/mxbzT3uYXxE/maxresdefault.jpg">
    <img src="http://cdn.playbuzz.com/cdn/1af8dfed-eacb-4228-8219-8781715daa2d/115aad8d-8eee-45e4-b439-450602e843fd.jpg">
    <img src="http://www.majorspoilers.com/wp-content/uploads/2011/08/MSC6.jpg">
    <img src="http://static.srcdn.com/wp-content/uploads/franklin-richards.jpg">
  </figure>
</div>
 
 
 
 
 
Rather than having a specific DIV each time to call your img class, we can instead just use the actual img tag. Along with that, in this method I've used the keyframes css to control the slide images positioning.
 
Should you really want to control this with div content, you could simply wrap the images in your div and alter the class .slider figure img to .slider figure divto include other types of content. 
 
I hope that this helps you in your endeavours.