我正在尝试在我的一个 Google 协作平台中创建一个 slider ，该 slider 具有设置的背景，在本例中为围绕图像边框的圆圈。
我已经设法让背景出现在 slider 后面，但现在无法使两者正确对齐。
似乎无论我做什么，都不会对齐它们，我认为这取决于两个类都在同一个标签中。
但是，当我尝试将两个集合放在单独的 div 中时，我很难让背景出现在 slider 后面。我设法让它在上方、右侧和下方，但没有在后面。
这就是我目前的样子:
你们中有人知道我如何对齐图像吗？我使用的代码可以在下面找到。
<!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>
最佳答案
这是我在 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 更改的现场演示:
您没有使用 top/bottom/left/right css 属性同时管理圆形和 slider 图像，因为您使用位置在图像上方设置圆形作为 mask 。
希望这就是你想要的!
更新:这是最新的工作版本:http://jsfiddle.net/85k4b5y5/1/
关于具有设置背景的 Javascript slider ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26846652/