?在點(diǎn)擊小圓點(diǎn)時(shí)，像素在變化 ，可圖片不動(dòng)怎么辦
在點(diǎn)擊小圓點(diǎn)時(shí)，像素在變化 ，可圖片不動(dòng)怎么辦
氫氧化桐
2016-04-23
3 回答
舉報(bào)
0/150
提交
取消
2016-06-09
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、在前面已經(jīng)將parseInt(img.style.left)+offset+'px';賦值給了img.style.left，判斷的時(shí)候卻又加了一個(gè)offset，
本來點(diǎn)擊小圓點(diǎn)時(shí)是不會(huì)觸發(fā)if語句的，但你的判斷語句把left改為初始的left就是if(parseInt(img.style.left)+offset+offset> -255)的效果，結(jié)果點(diǎn)擊小圓點(diǎn)也可能觸發(fā)if語句，自然會(huì)有錯(cuò)誤
2、
<div class="img" id="img" style="left: -255px;" >
<img src="img/成績(jī).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，而數(shù)組navi取得確是下一組的，這樣來算left怎么也不可能算對(duì)吧
還有如果你用的是下一組的話，是四張圖片，if(parseInt(img.style.left)+offset < -765)中765應(yīng)改為1020
3、
<div class="img" id="img" style="left: -255px;" >
<img src="img/成績(jī).jpg" />
設(shè)置了left：-255，卻沒有在第1張圖片之前在加一張圖片，這樣你一進(jìn)去是看不到第一張圖片的，改成以下即可
<div class="img" id="img" style="left: -255px;" >
<img src="img/課表.jpg" />
<img src="img/成績(jī).jpg" />
<img src="img/圖書館.jpg" />
<img src="img/課表.jpg" />
</div>
2016-04-24
<!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/成績(jī).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>
2016-04-23
把你的代碼貼上來啊