我点箭头不动求解，下面我代码
慕运维920257
2018-12-17 01:07
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.container{
width: 100%;
height: 500px;
overflow: hidden;
position: relative;
}
.carousel{
width: 900px;
height: 500px;
}
.carousel img{
float: left;
position: absolute;
left: 177px;
}
.buttons{
position: absolute;
height: 10px;
width: 100px;
z-index: 2;
bottom: 40px;
left: 585px;
}
.buttons span {
cursor: pointer;
float: left;
border: 1px solid #fff;
width: 12px;
height: 12px;
border-radius: 50%;
background: #c4c4c4;
margin-right: 6px;
}
.buttons .on{
background-color: rgba(0,0,0,0.6);
}
.arrow{
cursor: pointer;
display: none;
text-align: center;
font-size: 90px;
font-weight: bold;
position: absolute;
z-index: 2;
top: 210px;
color: rgba(0,0,0,0.3);
text-decoration:none;
}
.arrow:hover{
background-color: #ccc；
}
.container:hover .arrow{
display: block;
}
#prev{
left: 60px;
}
#next{
right: 60px;
}
</style>
<body>
<div class="container">
<div class="carousel" id="list" style="left: -500px;">
<img id="img" width="900" height="500" src="images/4.jpg" alt="4">
<img id="img" width="900" height="500" src="images/1.jpg" alt="1">
<img id="img" width="900" height="500" src="images/2.jpg" alt="2">
<img id="img" width="900" height="500" src="images/3.jpg" alt="3">
<img id="img" width="900" height="500" src="images/4.jpg" alt="4">
<img id="img" width="900" height="500" src="images/1.jpg" alt="1">
</div>
<div class="buttons" id="buttons">
<span index="1" class="on"></span>
<span index="2"></span>
<span index="3"></span>
<span index="4"></span>
</div>
<a href="javascript:;" class="arrow" id="prev"><</a>
<a href="javascript:;" class="arrow" id="next">></a>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var container = document.getElementById('container');
var list = document.getElementById('list');
var buttons = document.getElementById('buttons').getElementsByTagName('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(-500);
}
prev.onclick = function(){
animate(500);
}
}
</script>
</html>
2回答
-
- 灵胤
- 2020-01-08 13:08:10
我的也不动，但是它在dw里面可以动，在网页上浏览就不动了
-
- qq_慕丝8192201
- 2019-05-28 12:46:05
next.onclick = function(){
animate(-900);
}
prev.onclick = function(){
animate(900);
}
试试
焦点图轮播特效
65235 学习 · 611 问题
相似问题