Question

我正在尝试在我的某个Google协作平台中创建一个滑块，该滑块具有固定的背景，在这种情况下，是围绕图像边框的圆圈。

我设法让背景显示在滑块后面，但现在无法使两者正确对齐。

似乎无论我做什么，都没有对齐它们，我认为这两个类都属于同一个标签。

然而，当我尝试将两个集合放在不同的div中时，我正努力让背景出现在滑块后面。我已经成功地将它上面，在右边和下面，但不是落后。

这就是我目前的样子： Slider as it stands

你们中的任何人都知道我如何对齐图像吗？我用过的代码可以在下面找到。

<!DOCTYPE html>
     <html>
     <head>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
     <script>

$(document).ready(function() {
  var $slider = $('.slider'); // class or id of carousel slider
  var $background = $('.background');
  var $slide = 'li'; // could also use 'img' if you're not using a ul
  var $transition_time = 1000; // 1 second
  var $time_between_slides = 4000; // 4 seconds


  function slides(){
    return $slider.find($slide);
  }

  slides().fadeOut();

  // set active classes
  slides().first().addClass('active');
  slides().first().fadeIn($transition_time);

  // auto scroll 
  $interval = setInterval(
    function(){
      var $i = $slider.find($slide + '.active').index();

      slides().eq($i).removeClass('active');
      slides().eq($i).fadeOut($transition_time);

      if (slides().length == $i + 1) $i = -1; // loop to start

      slides().eq($i + 1).fadeIn($transition_time);
      slides().eq($i + 1).addClass('active');
    }
    , $transition_time +  $time_between_slides 
  );
});
</script>

<style>
.slider {

  margin: 0px 0px;
  width: 380px; /* Update to your slider width */
  height: 300px; /* Update to your slider height */
  position: relative;
    text-align: center;
  overflow: hidden;
    z-index: 1;

}
.slider li {

  display: none;
  position: absolute; 
    text-align:center;
  top: 0; 
  left: 0; 
}


.centered {
    margin: 0 auto;
    text-align: left;
    width: 350px;
}

  .background{
    margin: 0px -150px;
  width: 500px; /* Update to your slider width */
  height: 500px; /* Update to your slider height */
  position: absolute;
    text-align: center;
    overflow: hidden;
      z-index: 2;
    }


</style>



</head>





<body>


 <div class="centered">

<ul class="slider">
  <ul class = "background">
    <center><img class = "background" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3YXVIT0ItbjNBVFk"width="500" height="500"> </center>
   </ul>

  <li>
   <center> <img class ="slider" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3T0dzUmdZU3BYdWs" width="380" height="300"> <!-- Logo --></center>
  </li>
  <li>
   <center> <img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3SEVtekRRWkZIcEE" width="380" height="300"> <!-- Slide 1 --></center>
    </li>
   <li>
    <center><img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3aHFUQ2U5RHBsbXM" width="380" height="300"> <!-- Slide 2 --></center>
  </li>
  <li>
    <center><img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3QkN1ZjNtd2VlbEk" width="380" height="300"> <!-- Slide 3 --></center>
  </li>
  <li>
    <center><img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3cVdUSkprR3BtYzA" width="380" height="300"> <!-- Slide 4 --></center>
  </li>
  <li>
    <center><img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3UGluMnlrZXJzeXc" width="380" height="300"> <!-- Slide 5 --></center>
  </li>
  <li>
    <center><img class ="slider"  src="https://docs.google.com/uc?id=0B3lcWWaWmAb3UTBMb0I5aTBTcGM" width="380" height="300"> <!-- Slide 6 --></center>
  </li>

</ul>


  </div> 


</body>
</html>

Answer 1

这是我在StackOverFlow上的第一个答案，所以请小心忽略错误。请检查下面的更新CSS代码（只需替换CSS）：

.slider {
    height: 400px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    position: relative;
    text-align: center;
    top: 30px;
    width: 380px;
    z-index: 1;
}
.slider li {
    display: none;
    position: absolute;
    text-align:center;
    top: 0;
    left: 0;
}
.centered {
    margin: 0 auto;
    text-align: left;
    width: 350px;
}
.background {
    height: 390px;
    left: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    top: 10px;
    width: 390px;
    z-index: 2;
}

以下是CSS更改的现场演示：

http://jsfiddle.net/85k4b5y5/

您没有管理具有上/下/左/右css属性的圆形和滑块图像，因为您已使用位置将图像上方的圆圈作为蒙版。

希望这就是你想要的！

更新：这是最新的工作版本：http://jsfiddle.net/85k4b5y5/1/

Answer 2

您对每个滑块图片的评论都是错误的，因此您可能无法了解要应用属性的项目。

例如。看看这个评论：

<img class ="slider" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3T0dzUmdZU3BYdWs" width="380" height="300">
<!-- Logo --></center>

这会使你觉得这是徽标，但它实际上是滑块1。

如果您更新此行

<center><img class = "background" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3YXVIT0ItbjNBVFk"width="500" height="500"> </center>

要成为“滑块”类，宽度*高度为380x300，一切都正确对齐。

Javascript滑块与设置背景

2 个答案: