課程
/前端開發
/JavaScript
/焦點圖輪播特效
在點擊小圓點時，像素在變化 ，可圖片不動怎么辦
2016-04-23
源自：焦點圖輪播特效 5-1
正在回答
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>
你取得img是上一組圖片的id，而數組navi取得確是下一組的，這樣來算left怎么也不可能算對吧
還有如果你用的是下一組的話，是四張圖片，if(parseInt(img.style.left)+offset < -765)中765應改為1020
3、
設置了left：-255，卻沒有在第1張圖片之前在加一張圖片，這樣你一進去是看不到第一張圖片的，改成以下即可
<!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">
</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){
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>
把你的代碼貼上來啊
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答位移時間加長，再執行動畫過程中點擊小圓點會改變小圓點對應的圖片，怎么辦
1 回答點擊圖片不滾動
4 回答點擊小圓點出問題了
1 回答雙擊next/prev時，圓點跳兩下，但是圖片只動一下
1 回答為什么使用小圓點切換幾次圖片后，圖片出現的不對呢，比如點擊第一個小圓點卻出現了第三張圖片，開始點擊的幾次是正常的
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
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、在前面已經將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>
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/成績.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
把你的代碼貼上來啊