设置背景的Javascript滑块
我试图在我的一个谷歌网站中创建一个滑块，它有一个固定的背景，在这个例子中，是一个围绕图像边界的圆圈 我已经设法使背景显示在滑块后面，但现在无法使两者正确对齐 似乎无论我做什么，都不会使它们对齐，我认为这是因为两个类都在同一个标签内 然而，当我尝试将两个场景分别放在不同的div中时，我很难让背景显示在滑块后面。我设法让它在上面，在右边和下面，但不是在后面 这就是我现在看到的样子： 你们有谁知道我该如何排列这些图像吗？我使用的代码可以在下面找到设置背景的Javascript滑块,javascript,jquery,html,css,google-sites,Javascript,Jquery,Html,Css,Google Sites,我试图在我的一个谷歌网站中创建一个滑块，它有一个固定的背景，在这个例子中，是一个围绕图像边界的圆圈 我已经设法使背景显示在滑块后面，但现在无法使两者正确对齐 似乎无论我做什么，都不会使它们对齐，我认为这是因为两个类都在同一个标签内 然而，当我尝试将两个场景分别放在不同的div中时，我很难让背景显示在滑块后面。我设法让它在上面，在右边和下面，但不是在后面 这就是我现在看到的样子： 你们有谁知道我该如何排列这些图像吗？我使用的代码可以在下面找到 <!DOCTYPE html>
<!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>
$（文档）.ready（函数（）{
var$slider=$（'.slider'）；//转盘滑块的类或id
变量$background=$（'.background'）；
var$slide='li'；//如果不使用ul，也可以使用'img'
var$transition\u time=1000；//1秒
var$time\u两张幻灯片之间的间隔=4000；//4秒
函数幻灯片（）{
返回$slider.find（$slide）；
}
幻灯片（）；
//设置活动类
幻灯片（）.first（）.addClass（'active'）；
幻灯片（）.first（）.fadeIn（$transition\u time）；
//自动滚动
$interval=setInterval(
函数（）{
var$i=$slider.find（$slide+'.active'）.index（）；
slides（）.eq（$i）.removeClass（'active'）；
幻灯片（）；
如果（slides（）.length==$i+1）$i=-1；//循环开始
幻灯片（）.eq（$i+1）.fadeIn（$transition\u time）；
slides（）.eq（$i+1）.addClass（'active'）；
}
，$transition\u time+$time\u幻灯片之间的时间
);
});
.滑块{
保证金：0px 0px；
宽度：380px；/*更新滑块宽度*/
高度：300px；/*更新滑块高度*/
位置：相对位置；
文本对齐：居中；
溢出：隐藏；
z指数：1；
}
李先生{
显示：无；
位置：绝对位置；
文本对齐：居中；
排名：0；
左：0；
}
.居中{
保证金：0自动；
文本对齐：左对齐；
宽度：350px；
}
.背景{
利润率：0px-150px；
宽度：500px；/*更新滑块宽度*/
高度：500px；/*更新滑块高度*/
位置：绝对位置；
文本对齐：居中；
溢出：隐藏；
z指数：2；
}
-
-
-
-
-
-
-
更新：这是最新的工作版本：您对每个滑块图像的评论都是错误的，因此您可能不了解要将属性应用于哪些项目 看看这个评论：
<img class ="slider" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3T0dzUmdZU3BYdWs" width="380" height="300">
<!-- Logo --></center>
<center><img class = "background" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3YXVIT0ItbjNBVFk"width="500" height="500"> </center>
作为一个“滑块”类，宽度*高度为380x300，所有内容都正确对齐。旁注，
<center><img class = "background" src="https://docs.google.com/uc?id=0B3lcWWaWmAb3YXVIT0ItbjNBVFk"width="500" height="500"> </center>