課程
/前端開發
/JavaScript
/焦點圖輪播特效
我用這份js代碼做了兩個不同尺寸的輪播圖，為什么只有一個有效果？另一個就沒有效果？
2017-06-13
源自：焦點圖輪播特效 1-1
正在回答
window.onload = function () { ? ?
var container = document.getElementById('container'); ? ?
var list = document.getElementById('list'); ? ?
var buttons = document.getElementById('buttons').getElementsByTagName('span'); ? ?
var prev = document.getElementById('prev'); ? ?
var next = document.getElementById('next'); ? ?
var index = 1; ? ?
var len = 5; ? ?
var animated = false; ? ?
var interval = 3000; ? ?
var timer; ? ?
function animate (offset) { ? ?
if (offset == 0) { ? ?
return; ? ?
} ? ?
animated = true; ? ?
var time = 300; ? ?
var inteval = 10; ? ?
var speed = offset/(time/inteval); ? ?
var left = parseInt(list.style.left) + offset; ? ?
var go = function (){ ? ?
if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { ? ?
list.style.left = parseInt(list.style.left) + speed + 'px'; ? ?
setTimeout(go, inteval); ? ?
else { ? ?
list.style.left = left + 'px'; ? ?
if(left>-200){ ? ?
list.style.left = -600 * len + 'px'; ? ?
if(left<(-600 * len)) { ? ?
list.style.left = '-600px'; ? ?
animated = false; ? ?
go(); ? ?
function showButton() { ? ?
for (var i = 0; i < buttons.length ; i++) { ? ?
if( buttons[i].className == 'on'){ ? ?
buttons[i].className = ''; ? ?
break; ? ?
buttons[index - 1].className = 'on'; ? ?
function play() { ? ?
timer = setTimeout(function () { ? ?
next.onclick(); ? ?
play(); ? ?
}, interval); ? ?
function stop() { ? ?
clearTimeout(timer); ? ?
next.onclick = function () { ? ?
if (animated) { ? ?
if (index == 5) { ? ?
index = 1; ? ?
index += 1; ? ?
animate(-600); ? ?
showButton(); ? ?
prev.onclick = function () { ? ?
if (index == 1) { ? ?
index = 5; ? ?
index -= 1; ? ?
animate(600); ? ?
for (var i = 0; i < buttons.length; i++) { ? ?
buttons[i].onclick = function () { ? ?
if(this.className == 'on') { ? ?
var myIndex = parseInt(this.getAttribute('index')); ? ?
var offset = -600 * (myIndex - index); ? ?
animate(offset); ? ?
index = myIndex; ? ?
container.onmouseover = stop; ? ?
container.onmouseout = play; ? ?
}? ? ?
代碼沒給出，怎么會知道呀
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答關于源代碼的疑問
1 回答關于視頻中的bug還有跟下載中的源代碼的比較
1 回答源代碼在哪
1 回答代碼問題
3 回答關于箭頭的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-06-13
window.onload = function () { ? ?
var container = document.getElementById('container'); ? ?
var list = document.getElementById('list'); ? ?
var buttons = document.getElementById('buttons').getElementsByTagName('span'); ? ?
var prev = document.getElementById('prev'); ? ?
var next = document.getElementById('next'); ? ?
var index = 1; ? ?
var len = 5; ? ?
var animated = false; ? ?
var interval = 3000; ? ?
var timer; ? ?
function animate (offset) { ? ?
if (offset == 0) { ? ?
return; ? ?
} ? ?
animated = true; ? ?
var time = 300; ? ?
var inteval = 10; ? ?
var speed = offset/(time/inteval); ? ?
var left = parseInt(list.style.left) + offset; ? ?
var go = function (){ ? ?
if ( (speed > 0 && parseInt(list.style.left) < left) || (speed < 0 && parseInt(list.style.left) > left)) { ? ?
list.style.left = parseInt(list.style.left) + speed + 'px'; ? ?
setTimeout(go, inteval); ? ?
} ? ?
else { ? ?
list.style.left = left + 'px'; ? ?
if(left>-200){ ? ?
list.style.left = -600 * len + 'px'; ? ?
} ? ?
if(left<(-600 * len)) { ? ?
list.style.left = '-600px'; ? ?
} ? ?
animated = false; ? ?
} ? ?
} ? ?
go(); ? ?
} ? ?
function showButton() { ? ?
for (var i = 0; i < buttons.length ; i++) { ? ?
if( buttons[i].className == 'on'){ ? ?
buttons[i].className = ''; ? ?
break; ? ?
} ? ?
} ? ?
buttons[index - 1].className = 'on'; ? ?
} ? ?
function play() { ? ?
timer = setTimeout(function () { ? ?
next.onclick(); ? ?
play(); ? ?
}, interval); ? ?
} ? ?
function stop() { ? ?
clearTimeout(timer); ? ?
} ? ?
next.onclick = function () { ? ?
if (animated) { ? ?
return; ? ?
} ? ?
if (index == 5) { ? ?
index = 1; ? ?
} ? ?
else { ? ?
index += 1; ? ?
} ? ?
animate(-600); ? ?
showButton(); ? ?
} ? ?
prev.onclick = function () { ? ?
if (animated) { ? ?
return; ? ?
} ? ?
if (index == 1) { ? ?
index = 5; ? ?
} ? ?
else { ? ?
index -= 1; ? ?
} ? ?
animate(600); ? ?
showButton(); ? ?
} ? ?
for (var i = 0; i < buttons.length; i++) { ? ?
buttons[i].onclick = function () { ? ?
if (animated) { ? ?
return; ? ?
} ? ?
if(this.className == 'on') { ? ?
return; ? ?
} ? ?
var myIndex = parseInt(this.getAttribute('index')); ? ?
var offset = -600 * (myIndex - index); ? ?
animate(offset); ? ?
index = myIndex; ? ?
showButton(); ? ?
} ? ?
} ? ?
container.onmouseover = stop; ? ?
container.onmouseout = play; ? ?
play(); ? ?
}? ? ?
2017-06-13
代碼沒給出，怎么會知道呀