为了账号安全,请及时绑定邮箱和手机立即绑定

图片切换不了,谢谢

<!DOCTYPE html>
<html>
<head>
<meta>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8 ">
	<title>焦点图轮播效果</title>
	<style type="text/css">
		*{margin: 0; padding: 0; text-decoration: none;}
		body{padding: 20px; background-color: #707070;}
		#container{width: 329px; height: 585px; border: 3px solid #999; overflow: hidden; position: relative; margin: 0 auto;}
		#list{width: 2632px; height: 585px; position: absolute; z-index: 1;}
		#list img{width: 329px; height: 585px; float: left;}
		#button{position: absolute; height: 10px; width:99px; z-index: 2; bottom: 20px; left: 115px; }
		#button span{cursor: pointer; width: 10px; height: 10px; border: 1px solid #fff; float: left; border-radius: 50%; margin: 0px 2px; background-color: #333;}
		#button .on{background-color: #F78F07;}
		.arrow{cursor: pointer; display: none; line-height: 80px; text-align: center; font-size: 25px; font-weight: bold; width: 30px; height: 80px; position: absolute; z-index: 2; background-color: rgba(0,0,0,.3); top: 220px; color: #333;}
		.arrow{background-color: rgba(0,0,0,.2);}
		#container:hover .arrow{display: block;}
		#prev{left: 10px;}
		#next{right: 10px;}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var container = document.getElementById('container');
			var list = document.getElementById('list');
            var button = document.getElementById('button').getElementByTagname('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');

            next.onclick = function(){
            	list.style.left = parseInt(list.style.left) - 329 + 'px';
            }
            prev.onclick = function(){
            	list.style.left = parseInt(list.style.left) + 329 + 'px';
            }
		}
	</script>
</head>
<body>
    <div id="container">
    	<div id="list" style="left: -329px;">
    	    <img src="img/img6.jpg" alt="" />
    		<img src="img/img1.jpg" alt="" />
    	    <img src="img/img2.jpg" alt="" />
    	    <img src="img/img3.jpg" alt="" />
    	    <img src="img/img4.jpg" alt="" />
    	    <img src="img/img5.jpg" alt="" />
    	    <img src="img/img6.jpg" alt="" />
    	    <img src="img/img1.jpg" alt="" />
    	</div>
    	<div id="button">
    		<span index="1" class="on"></span>
    		<span index="2"></span>
    		<span index="3"></span>
    		<span index="4"></span>
    		<span index="5"></span>
    		<span index="6"></span>
    	</div>
    	<a href="javascript:;" class="arrow" id="prev">&lt;</a>
    	<a href="javascript:;" class="arrow" id="next">&gt;</a>
    </div>
</body>
</html>

图片和老师的不太一样  所以宽度不一样  

正在回答

3 回答

代码第30行

getElementByTagname

Tags标签的话,可能是多个要注意s

还有就是大小写Name。

getElementsByTagName


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

你js部分的代码出错了,你用火狐调试

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

浏览器版本吧,多换几个浏览器试试。

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

赵嚒嚒 提问者

谷歌、火狐、360都不能切换。。。
2016-03-13 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
焦点图轮播特效
  • 参与学习       65286    人
  • 解答问题       611    个

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

进入课程

图片切换不了,谢谢

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信