課程
/前端開發
/JavaScript
/焦點圖輪播特效
為什么代碼和老師敲的一點擊箭頭圖片老是第一張
2016-10-18
源自：焦點圖輪播特效 3-1
正在回答
如果錯誤都找出來，證明你學會了，其它可以從別人的代碼中找錯誤也是一種學習方法。
iyffvpigriqbarlqakdewmxfiymxiwovdtwwubmgynjjpcqwdiicbqsfsqlzsbrlezzxcfwaoebfylafeidsphyvolkchkdyjresyuhvsbkhvsuzffyxgmlxzxhli
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 animated =false;
function showb() {
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on"){
buttons[i].className="";
break;
}
buttons[index -1].className ="on";
function animate(offset) {
animated=true;
var news=parseInt(list.style.left)+offset;
var time=300; ? //總時間
var interval =10; //間隔時間
var speed=offset/(time/interval);
function go() {
if ((speed < 0 && parseInt(list.style.left)>news) || ?(speed>0 && parseInt(list.style.left)<news)) {
list.style.left=parseInt(list.style.left)+speed+"px";
setTimeout(go,interval);
// statement
else{
animated=false;
list.style.left =news+"px";
if (news>-600) {
list.style.left=-3000+"px";
if (news<-3000 ){
list.style.left=-600+"px";
go();
next.onclick=function () {
if (index==5) {
index=1;
else {
index+=1;
showb();
if (!animated) {
animate(-600);
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 (animate) {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(this.className == 'on') {
? ? ? ? ? ? ? ? ? ? var myIndex = parseInt(this.getAttribute('index'));
? ? ? ? ? ? ? ? ? ? var offset = -600 * (myIndex - index);
? ? ? ? ? ? ? ? ? ? showb();
? ? ? ? ? ? ? ? ? ? if (!animated) {
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? animate(offset);
? ? ? ? ? ? ? ? ? ? index = myIndex;
? ? ? ? ? ? ? ? }
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答輪番圖圖片100％
1 回答輪播圖無限滾動問題
2 回答怎么實現全屏banner的輪播圖
1 回答漸變的輪播圖怎么實現呢？
3 回答關于輪播圖按鈕事件的問題
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2022-03-29
如果錯誤都找出來，證明你學會了，其它可以從別人的代碼中找錯誤也是一種學習方法。
iyffvpigriqbarlqakdewmxfiymxiwovdtwwubmgynjjpcqwdiicbqsfsqlzsbrlezzxcfwaoebfylafeidsphyvolkchkdyjresyuhvsbkhvsuzffyxgmlxzxhli
2016-10-18
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 animated =false;
function showb() {
for (var i = 0; i <buttons.length; i++) {
if (buttons[i].className=="on"){
buttons[i].className="";
break;
}
}
buttons[index -1].className ="on";
}
function animate(offset) {
animated=true;
var news=parseInt(list.style.left)+offset;
var time=300; ? //總時間
var interval =10; //間隔時間
var speed=offset/(time/interval);
function go() {
if ((speed < 0 && parseInt(list.style.left)>news) || ?(speed>0 && parseInt(list.style.left)<news)) {
list.style.left=parseInt(list.style.left)+speed+"px";
setTimeout(go,interval);
// statement
}
else{
animated=false;
list.style.left =news+"px";
if (news>-600) {
list.style.left=-3000+"px";
}
if (news<-3000 ){
list.style.left=-600+"px";
}
}
}
go();
}
next.onclick=function () {
if (index==5) {
index=1;
}
else {
index+=1;
}
showb();
if (!animated) {
animate(-600);
}
}
prev.onclick=function () {
if (index==1) {
index=5;
}
else {
index-=1;
}
showb();
if (!animated) {
animate(600);
}
}
for (var i = 0; i < buttons.length; i++) {
? ? ? ? ? ? ? ? buttons[i].onclick = function () {
? ? ? ? ? ? ? ? ? ? if (animate) {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(this.className == 'on') {
? ? ? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? var myIndex = parseInt(this.getAttribute('index'));
? ? ? ? ? ? ? ? ? ? var offset = -600 * (myIndex - index);
? ? ? ? ? ? ? ? ? ? showb();
? ? ? ? ? ? ? ? ? ? if (!animated) {
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? ? ? animate(offset);
? ? ? ? ? ? ? ? ? ? index = myIndex;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? }
}
}