//css代码
#pcontainer{
overflow: hidden;
position: relative;
width:1400px;
height:800px;
border: 1px solid black;
}
#list{
width:9800px;
height:800px;
position: absolute;
z-index:1;
}
#list img{float:left;}
#buttons
{
position: absolute;
height:10px;
width:100px;
z-index: 2;
bottom:20px;
left: 650px;
}
#buttons span
{
cursor: pointer;
float:left;
border: 1px solid #fff;
width: 10px;
height:10px;
border-radius: 50%;
background: #333;
margin-right: 5px;
}
#buttons.on{background: orangered;}
.arrow {
cursor: pointer;
display: none;
line-height: 39px;
text-align: center;
font-size: 36px;
font-weight: bold;
width: 40px;
height: 40px;
position: absolute;
z-index: 2;
top: 180px;
background-color: RGBA(0,0,0,.3);
color: #fff;
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
#container:hover .arrow { display: block;}
#prev { left: 100px;}
#next { right: 100px;}
//html代码
<div id="pcontainer">
<div><img src="images/Alta.jpg" width="800" ></div>
<div id="list" style="left: -1400px;">
<img src="images/6.jpg" width="1400" alt="">
<img src="images/2.jpg" width="1400" alt="">
<img src="images/3.jpg" width="1400" alt="">
<img src="images/4.jpg" width="1400" alt="">
<img src="images/5.jpg" width="1400" alt="">
<img src="images/6.jpg" width="1400" alt="">
<img src="images/2.jpg" width="1400" alt="">
</div>
<div id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
<span index="5"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
//js代码
window.onload = function(){
var pcontainer=document.getElementById('pcontainer');
var list=document.getElementById('list');
var buttons=document.getElementById('buttons').getElementByTagName('span');
var prev=document.getElementById('prev');
var next=document.getElementById('next');
function animate(offset){
list.style.left=parseInt(list.style.left)+offset+'px';
}
next.onclick=function(){
animate(1400);
}
prev.onclick=function(){
animate(-1400);
}
}
js代码
getElementById()和getElementsByTagName()的方法名也是有错
我知道了!是css样式中写错了
#container:hover .arrow { display: block;}
改为
#pcontainer:hover .arrow { display: block;}
如图(图片旁边的空白也没有箭头啊)
在DW双击那个<a>的链接,也找不到箭头
到底是为什么??