Javascript 如何使用css为背景图像提供滑块？_Javascript_Php_Jquery_Html_Css

Javascript 如何使用css为背景图像提供滑块？

javascript php jquery html css

Javascript 如何使用css为背景图像提供滑块？,javascript,php,jquery,html,css,Javascript,Php,Jquery,Html,Css,代码： #例1{ 背景图片：url（img_flwr.gif）、url（paper.gif）、url（flower.gif）；背景位置：右下、左上；背景重复：不重复，重复；填充：100px； } 在这里，我使用三个背景图像，即img_flwr.gif、paper.gif和flower.gif。我想用css滑动这些图像。我不想让这些图像褪色。那么，我如何才能做到这一点呢？制作一个图像元素，并使用位置：绝对和z-indexCSS属性设置另一个元素后面的图像。然后使用JQuery制作滑块 &

代码：


#例1{
背景图片：url（img_flwr.gif）、url（paper.gif）、url（flower.gif）；
背景位置：右下、左上；
背景重复：不重复，重复；
填充：100px；
}

在这里，我使用三个背景图像，即img_flwr.gif、paper.gif和flower.gif。我想用css滑动这些图像。我不想让这些图像褪色。那么，我如何才能做到这一点呢？

制作一个图像元素，并使用

位置：绝对

和

z-index

CSS属性设置另一个元素后面的图像。然后使用JQuery制作滑块

<html>
<head>
  <style> 
  #example1 {
      background-image: url(img_flwr.gif), url(paper.gif), url(flower.gif);
      background-position: right bottom, left top;
      background-repeat: no-repeat, repeat;
      padding: 100px;
  }
  </style>
</head>
<body>
  <div id="example1">
  </div>
</body>
</html>


#例1{
背景位置：右下角；
背景重复：不重复，重复；
填充：100px；
z指数：10；
}
#滑块{
位置：绝对位置；
z指数：0；
}

您自己做了什么尝试？您可能希望使用javascript来实现此目的，因为CSS仅用于样式设置。是否要设置多个背景图像？您应该使用

setInterval

和jQuery css来实现这一点

<html>
<head>
  <style> 
#example1 {
  background-position: right bottom;
  background-repeat: no-repeat, repeat;
  padding: 100px;
  z-index: 10;

 }
#slider {
    position: absolute;
    z-index: 0;
 }
  </style>
  </head>
  <body>
  <div id="example1">

  </div>
 <div id="slider">
 <img src="flwr.jpg" alt="Paris">
 <img src="paper.jpg" alt="Paris">
 <img src="flower.jpg" alt="Paris">
  </div>

<script>

</script>



</body>
</html>