[已解决]为什么我在这里设置pic的left没有用！求大佬解救

无心柳 · 发表于 2019-7-18 20:43:01

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#pi{margin: 50px auto;width: 470px;height: 250px;
background-color: aquamarine;padding:10px ;auto; position: relative;overflow: hidden;}
#pic{list-style: none;position:absolute;}
#pic li{float: left;margin: 0 10px;}
#leader{position: absolute;bottom: 15px;}
#leader a{background-color: #00FFFF;float: left;width: 15px;height: 15px;margin:0 10px;
opacity: 0.5;}
#leader a:hover{background-color: black;}
</style>
<script type="text/javascript">
window.onload = function(){
var pic = document.getElementById("pic")

var img = document.getElementsByTagName("img")

pic.style.width = (img.length*520)+"px"

var pi =document.getElementById("pi")

var leader = document.getElementById("leader")

leader.style.left = (pi.offsetWidth - leader.offsetWidth)/2 +"px";

//使导航栏选中图片变成黑色.
var index = 0;

var alla = document.getElementsByTagName("a")

alla[index].style.backgroundColor = "#000000"

for(var i=0;i<alla.length;i++)
{

alla[i].num = i;

alla[i].onclick = function(){

index = this.num;
alert(index)
-------------->pic.style.left="-520px";

};

};

}
</script>
</head>
<body>
<div id="pi">
<ul id="pic">
<li><img src="qq/1.jpg" width="450px" height="250px"></li>
<li><img src="qq/2.jpg" width="450px" height="250px"></li>
<li><img src="qq/3.jpg" width="450px" height="250px"></li>
</ul>
<div id="leader">
<a href=""></a>
<a href=""></a>
<a href=""> </a>
</div>
</div>
</body>
</html>

最佳答案

月排行榜 / 总排行榜

sukiwhip

2019-7-24 15:01:30

for (var i = 0; i < alla.length; i++) {

                alla[i].num = i;

                alla[i].onclick = function() {


                    index = this.num;
                    alert(index)
                    alert(pic.style.left)
                    pic.style.left = "-520px";
                    alert(pic.style.left)


                };

你加这一句上去，就能看到一开始 pic.style.left 就是不存在的

跳转到最佳答案楼层

不二如是 · 发表于 2019-7-19 07:44:23

1、去掉图中方框中代码：

按照0，1，2正常切换：

无心柳 · 发表于 2019-7-19 14:30:22

不二如是发表于 2019-7-19 07:44
1、去掉图中方框中代码：

那个符号是我打上去。。。标识不懂的地方。文件我不知道怎么发上来，所以没有图片，如果left变化了，图片就应该变动的。。但是没有变化。。

sukiwhip · 发表于 2019-7-24 15:01:30

这个最佳答案由 sukiwhip 给出，感谢 sukiwhip 的回答。

单击隐藏图章

for (var i = 0; i < alla.length; i++) {

                alla[i].num = i;

                alla[i].onclick = function() {


                    index = this.num;
                    alert(index)
                    alert(pic.style.left)
                    pic.style.left = "-520px";
                    alert(pic.style.left)


                };

你加这一句上去，就能看到一开始 pic.style.left 就是不存在的

账号		自动登录	找回密码
密码			立即注册