放置滑块(淡入淡出效果),但是当滑块中的图像发生变化时,必须放在主页滑块之后的小部件与滑块发生冲突,我猜在边缘顶部有问题,因为当图像发生变化时,一个图像到第二个图像之间的交易时间,在这段时间内,小部件,从菜单栏考虑边缘 - 顶部,但是当显示滑块上的图像时,它从滑块开始的位置获取边距顶部,plz看起来以下代码:
将java脚本放在body标签的html文件中..是否正确?
<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>
只为滑块编写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);
}
答案 0 :(得分:0)
添加
position:absolute;
到CSS中的滑块