                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /焦点图轮播特效

图片切换不了

<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>

慕粉1473174802

2017-01-14

源自：焦点图轮播特效 3-1

关注问题我要回答

1070

操作

收起

5 回答

Slimpan
2017-06-02

亲，我的也是这个错误，你帮我看看谢谢

0 回复有任何疑惑可以回复我~

Slimpan
2017-06-02

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');

}

}

0 回复有任何疑惑可以回复我~

慕粉1473174802 提问者
2017-01-16

ok,谢谢了

0 回复有任何疑惑可以回复我~

慕数据5775487
2017-01-16

另外贴代码时选择一下代码语言，这格式看了太费劲！

0 回复有任何疑惑可以回复我~

慕数据5775487
2017-01-16

getElenmentByTagName("span")书写错误，应该是getElenmentsByTagName("span")，

而且你这JS代码怎么一个分号都没有？

我没调试，你先把这些基本的错误先改一下再说。

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

焦点图轮播特效

参与学习 65278 人
解答问题 611 个

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

本课相似问答

3 回答图片切换不了，谢谢

2 回答为什么切换不了图片呢？

2 回答不知道什么错误，切换图片函数换了后不能切了

1 回答轮播图片切换不完整

2 回答按钮切换图片效果

搜索更多本课相关问答

图片切换不了

我要回答关注问题

意见反馈帮助中心 APP下载