在点击小圆点时，像素在变化，可图片不动怎么办-慕课网

首页课程实战体系课手记专栏慕课教程

在点击小圆点时，像素在变化，可图片不动怎么办

来源：5-1 按钮切换

氢氧化桐

2016-04-23 16:49

在点击小圆点时，像素在变化，可图片不动怎么办

写回答关注

3回答

Sunnylincon

2016-06-09 21:37:29

img.style.left=parseInt(img.style.left)+offset+'px';
if(parseInt(img.style.left)+offset > -255){
img.style.left=-765+'px';
}
if(parseInt(img.style.left)+offset < -765){
img.style.left=-255+'px';
}
1、在前面已经将parseInt(img.style.left)+offset+'px';赋值给了img.style.left，判断的时候却又加了一个offset，
本来点击小圆点时是不会触发if语句的，但你的判断语句把left改为初始的left就是if(parseInt(img.style.left)+offset+offset> -255)的效果，结果点击小圆点也可能触发if语句，自然会有错误
2、
<div class="img" id="img" style="left: -255px;" >
<img src="img/成绩.jpg" />
<img src="img/图书馆.jpg" />
<img src="img/课表.jpg" />
</div>
和
<div class="navi" id="navi">
<span index="1" class="on"><img src="img/icon_dean_score.png" /></span>
<span index="2"><img src="img/icon_dean_exam.png"/></span>
<span index="3"><img src="img/icon_ecard.png"/></span>
<span index="4"><img src="img/icon_chat.png" /></span>
</div>
你取得img是上一组图片的id，而数组navi取得确是下一组的，这样来算left怎么也不可能算对吧
还有如果你用的是下一组的话，是四张图片，if(parseInt(img.style.left)+offset < -765)中765应改为1020
3、
<div class="img" id="img" style="left: -255px;" >
<img src="img/成绩.jpg" />
设置了left：-255，却没有在第1张图片之前在加一张图片，这样你一进去是看不到第一张图片的，改成以下即可
<div class="img" id="img" style="left: -255px;" >
<img src="img/课表.jpg" />
<img src="img/成绩.jpg" />
<img src="img/图书馆.jpg" />
<img src="img/课表.jpg" />
</div>

0 0
氢氧化桐

2016-04-24 12:33:41

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/try.css" />
</head>
<body>
<div id="show">
<div class="phone"><img src="img/phone.jpg" />
<div id="continer">
<div class="img" id="img" style="left: -255px;" >
<img src="img/成绩.jpg" />
<img src="img/图书馆.jpg" />
<img src="img/课表.jpg" />
</div>
</div>
</div>
<div class="navi" id="navi">
<span index="1" class="on"><img src="img/icon_dean_score.png" /></span>
<span index="2"><img src="img/icon_dean_exam.png"/></span>
<span index="3"><img src="img/icon_ecard.png"/></span>
<span index="4"><img src="img/icon_chat.png" /></span>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
var continer=document.getElementById('continer');
var img=document.getElementById('img');
var navi=document.getElementById('navi').getElementsByTagName('span');
var index=1;

function showButton() {
for (var i = 0; i < navi.length ; i++) {
if( navi[i].className == 'on'){
navi[i].className = '';
break;
}
}
navi[index - 1].className = 'on';
}

function animate(offset){

img.style.left=parseInt(img.style.left)+offset+'px';
if(parseInt(img.style.left)+offset > -255){
img.style.left=-765+'px';
}
if(parseInt(img.style.left)+offset < -765){
img.style.left=-255+'px';
}
}

for(var i=0;i<navi.length;i++){
navi[i].onclick=function(){
var myIndex=parseInt(this.getAttribute('index'));
var offset=-255*(myIndex-index);
index=myIndex;
animate(offset);
showButton();
}
}
}
</script>
</html>

0 0
慕后端1993647

2016-04-23 19:04:54

把你的代码贴上来啊

0 0