一段轮播图的代码单独拿出来可以执行，放在我做的一个页面中却不能执行，为什么？
两段代码完全一样
<style type="text/css">
#exp_list_slider_content {
position:relative;
width:652px;
height:400px;
margin:8px auto;
border:1px solid #CCC;
background:rgba(255,255,255,0.5);
box-shadow:0 0 5px #666;
overflow:hidden;
}
#exp_list_content {
width:4200px;
height:400px;
position:absolute;
z-index:1;
}
.exp_list {
width:652px;
height:400px;
float:left;
}
.exp_list dt {
font-weight:600;
font-size:30px;
}
#prev,#next{
display:block;
position:absolute;
padding:3px 8px 3px 8px;
background:rgba(153,153,153,0.5);
top:180px;
font-size:25px;
z-index:2;
}
#prev {
left:15px;
}
#next {
left:608px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var container = document.getElementById('exp_list_slider_content');
var prev = document.getElementById('prev');
var next = document.getElementById('next');
var list = document.getElementById('exp_list_content');
next.onclick = function(){
list.style.left = parseInt(list.style.left) - 652 +'px';
}
prev.onclick = function(){
list.style.left = parseInt(list.style.left) + 652 + 'px';
}
}
</script>
</head>
<body>
<div id="exp_list_slider_content">
<div id="exp_list_content" style="left:0px;">
<div class="exp_list">
<div class="exp_list_left">
<div id="exp_list_left1">
<dl>
<dt>aaaaaaaaaa</dt>
<dd>aaaaaaaaaa</dd>
<dd>aaaaaaaa</dd>
<dd>aaa</dd>
<dd>aaaaaa</dd>
</dl>
</div>
</div>
</div>
<div class="exp_list">
<div class="exp_list_left">
<div id="exp_list_left1">
<dl>
<dt>bbbbbb</dt>
<dd>bbbbb公司</dd>
<dd>bbb台开发</dd>
<dd>bbbbbbb</dd>
</dl>
</div>
</div>
</div>
<div class="exp_list">
<div class="exp_list_left">
<div id="exp_list_left1">
<dl>
<dt>作品</dt>
<dd>在这里</dd>
</dl>
</div>
</div>
</div>
</div>
<a href="javascript:;" class="arrow" id="prev"> < </a>
<a href="javascript:;" class="arrow" id="next"> > </a>
</div>
</body>
</html>
sh_ero浏览 1304回答 1
1回答
-
OlderSkee
首先，exp_list_left1这个id 用了三次，id一般只会用一次，class才多次使用 。其次，container 这个变量没有使用过，没使用就不用声明了。然后改了这两个之后基本上你的代码就可以切换了 ，只是没有首位链接轮播的效果而已。
随时随地看视频慕课网APP
相关分类
JavaScript