图片切换不了
慕粉1473174802
2017-01-14 14:07
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
padding: 250px;
}
#paa {
width: 700px;
height: 600px;
overflow: hidden;
position: relative;
border: 2px green solid;
}
#pab {
position: absolute;
z-index: 1;
padding-left:0;
}
img {
float: left;
width: 700px;
height: 600px;
}
#pac {
position: absolute;
z-index:2;
bottom:40px;
right:300px;
}
span {
font-size:20px;
float: left;
margin-right:10px;
color:yellow;
cursor:pointer;
}
span:hover{color:lime;
}
.pad{position:absolute;font-size:50px;z-index:2;text-decoration:none;border:1px silver solid;
display:none;text-align:center;top:300px;background:RGAB(red,0,0,.3);padding:10px;font-weight:bold;
}
#prev{left:10px;cursor:pointer;}
#next{
right:10px;cursor:pointer;
}
#paa:hover .pad{display:block;
}
.pad:hover{
background:fuchsia;}
}
</style>
<script type="text/javascript">
window.onload=function(){
var paa=document.getElementById("paa")
var pab=document.getElementById("pab")
var pac=document.getElementById("pac").getElenmentByTagName("span")
var prev=document.getElementById("prev")
var next=document.getElementById("next")
prev.onclick=function(){
pab.style.left=function(){
pab.style.left=parseInt(pab.style.left)+700+"px"
}}
next.onclick=function(){
pab.style.left=function(){
pab.style.left=parseInt(pab.style.left)-700+"px"
}
}
}
</script>
</head>
<body>
<div id="paa">
<div id="pab" style="left: -700px;">
<img alt="" src="/img/20170108/100006731.jpg/b18c39e3e57a82829b393b8d57065276.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/3ee908dfcc44957669cad16b1698a899.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/6ead85423b7c061ffdd71c363d20f82c.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/a6f76d436fff0440676cecb7e7b1355d.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/ac5a8a8d254f5c8143c219a7ba992b01.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/b18c39e3e57a82829b393b8d57065276.jpg" />
<img alt="" src="/img/20170108/100006731.jpg/3ee908dfcc44957669cad16b1698a899.jpg" /> </div>
<div id="pac">
<span>1</span><span>2</span><span>3</span><span>4</span><span>5</span></div>
<div>
<a href="javascript:;" id="prev" class="pad"><</a> <a href="javascript:;" id="next" class="pad">
></a> </div>
</div>
<body>
</body>
</html>
5回答
-
- Slimpan
- 2017-06-02 15:33:17
亲，我的也是这个错误，你帮我看看谢谢
-
- Slimpan
- 2017-06-02 15:32:48
window.onload =function(){
//1、获取元素 catch element
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');
next.onclick=function(){
list.style.left=parseInt(list.style.left)-600+'px';
console.log('yyyy');
}
prev.onclick=function(){
list.style.left=parseInt(list.style.left)+600+'px';
console.log('xxxx');
}
}
-
- 慕粉1473174802
- 2017-01-16 14:30:04
ok,谢谢了
-
- 慕数据5775487
- 2017-01-16 00:02:05
另外贴代码时选择一下代码语言，这格式看了太费劲！
-
- 慕数据5775487
- 2017-01-16 00:00:22
getElenmentByTagName("span")书写错误，应该是getElenmentsByTagName("span")，
而且你这JS代码怎么一个分号都没有？
我没调试，你先把这些基本的错误先改一下再说。
焦点图轮播特效
65234 学习 · 611 问题
相似问题