大神看看我的轮播图代码有什么问题-慕课网

大神看看我的轮播图代码有什么问题

来源：2-1 样式布局关键代码讲解

虫虫IQ

2016-06-22 11:37

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>

<style>
*{margin:0;padding:0;text-decoration:none;}
#container{width:600px;
           height:450px;
		   border:3px solid red;
 		   position:relative;
		   	overflow:hidden;}
#list{width:4200px;height:450px;position:absolute;z-index:1;}
#list img{float:left;}	
.arrow{line-height:39px;font-size:36px;font-weight:bold;corsor:pointer;display:none;width:38px;height:38px;background:#fff;background-color:rgba(0,0,0,0.3);position:absolute;z-index:2;text-align:center;top:40%} 
#prve{left:10px}
#next{right:10px}
#container:hover .arrow{display:block;}
.arrow:hover{background-color:rgba(0,0,0,.7);}
</head>
</style>
<script>
  window.onload=function(){
	  var container=document.getElementById("container");
	  var list=document.getElementById("list");
	  var button=document.getElementById("botton").document.getElementsByTagName("span");
	  var prve=document.getElementById("prve");
	  var next=document.getElementById("next");
	  
	  function animate(offset){
		list.style.left=parseInt(list.style.left)+offset+"px";}
	  nxet.onclick=function(){
		  animate(-600);
		  }
	  prve.onclick=function(){
		  animate(600);
	  }
	  }

</script>

<body>
<div id="container">
       <div id="list" style="left:0px;">
             <img src="img/img5.png" alt="5">
             <img src="img/img1.png" alt="1">
             <img src="img/img2.png" alt="2">
             <img src="img/img3.png" alt="3">
             <img src="img/img4.png" alt="4">
             <img src="img/img5.png" alt="5">
             <img src="img/img1.png" alt="1">
       </div>
       <div id="botton">
             <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="prve">&lt;</a>
       <a href="javascript:" class="arrow" id="next">&gt;</a>
</div>
</body>
</html>

写回答关注

1回答

慕粉3493340

2016-06-22 19:58:12

已采纳

两个地方错误，
1）29行去掉第二个document 改成
var button=document.getElementById("botton").getElementsByTagName("span");
2）33行 next书写错误

1 0

虫虫IQ

非常感谢！

2016-06-23 07:57:59

共 1 条回复 >

焦点图轮播特效

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

65279 学习 · 611 问题

查看课程

相似问题

各路大神我需要轮播图的无限滚动和自动播放的代码

回答 1

图片轮播的代码怎么写

回答 1

图像轮播问题，一直想不通，望大神指点

回答 1

轮播图无限滚动问题

回答 1

怎么做轮播图

回答 4

打开慕课网App查看更多内容