javascript - slider 与 html 中 slider 后放置的小部件和内容发生冲突

Question

放置 slider (淡入淡出效果)，但是当 slider 中的图像发生变化时，必须在主页中紧挨着 slider 放置的小部件与 slider 发生冲突，我猜顶部边距有问题，因为当图像发生变化时,, 一张图片到第二张图片之间的交易时间, 在此期间, 小部件, 考虑菜单栏的顶部边距, 但是当显示 slider 上的图像时, 它从 slider 开始的地方开始顶部边距,, 请看下面的代码:

将 java 脚本放在 html 文件中的 body 标签中..是否正确？

<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></

script> 
<script type="text/javascript" 

src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.

js? 
load=effects"></script> 
<script type="text/javascript">

function ShowEffect(element){ 
new Effect.Appear(element, 
{duration:5, from:0, to:1.0}); 
} 
function FadeEffect(element)
{ 
new Effect.Fade(element, 
{duration:5, from:1.0, to:0}); 
} 
var i = 0; 
var path = new Array(); 
// LIST OF IMAGES path[0] = "/image_1.gif"; 
path[1] = "images/pic1.png"; 
path[2] = "images/pic2.jpg"; 
path[3] = "images/pic3.jpg"; 
path[4] = "images/pic4.jpg"; 
function swapImage_0() 
{ 
document.slide.src = path[i]; 
if(i < path.length -1) i++; else i =0; 
setTimeout("FadeEffect('hideshow')",4000); 
setTimeout("ShowEffect('hideshow')",5000); 
setTimeout("swapImage_0()",5000); 
} 
window.onload=swapImage_0; 

</script> 

<div id="hideshow"> 
<img height="260" name="slide" src="images/pic1.png" width="1350"/> 
</div> 

<div id="slider">

<a href="https://#" title="Learn More" class="slider1"  target="_blank"></a>

<a href="https://#" title="Learn More" Class="Slider2" target="_blank"></a>

<a href="https://#" title="Learn More" Class="Slider3" target="_blank"></a>

</div>

仅为 slider 编写 css 代码，或者您可以在下面将它们称为小部件:

#slider
{
height:240px;
width:1350px;
margin-top:400px;
background-color:#000000;
}



.slider1 {
background-image: url('images/slider1.png');
        height: 240px;
    width: 245px;
    margin: 0px 200px;
        padding-left:10px;
        float: left;
        -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        z-index: 4;
}



.slider1:hover  {
        background-position: 245px 0px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8);
}

.slider2 {
background-image: url('images/slider2.png');


        height: 240px;
    width: 245px;
    margin-top:0px;
        margin-left:-100px;
        padding-left:9px;
        float: left;
        -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        z-index: 4;
}


.slider2:hover  {
        background-position: 245px 0px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8);
}


.slider3 {
background-image: url('images/slider3.png');
        height: 240px;
    width: 245px;
    margin-top:0px;
        margin-left:85px;
        padding-left:9px;
        float: left;
        -webkit-transition: all ease 0.3s;
    -moz-transition: all ease 0.3s;
    -o-transition: all ease 0.3s;
    -ms-transition: all ease 0.3s;
    transition: all ease 0.3s;
        z-index: 4;
}

.slider3:hover  {
        background-position: 245px 0px;
    box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.8);
}

Answer 1

添加

position:absolute；

CSS 中的 slider