課程
/前端開發
/JavaScript
/焦點圖輪播特效
一般項目中,輪播的圖片也應該是從后端獲取數據,然后用循環遍歷數據渲染,老師這種做法對后端很不友好,但我確實不知道用原生js如何實現不加附屬圖如何實現無限滾動,知道的小伙伴可以發個鏈接,貼個代碼,謝謝
2016-10-30
源自:焦點圖輪播特效 4-1
正在回答
//假設接收到的圖片數據如下json:
var json='['+
? ????????????? '{"n":0,"img":"imgName"},'+
? ????????????? '{"n":1,"img":"imgName"},'+
? ????????????? '{"n":2,"img":"imgName"},'+
? ????????????? '{"n":3,"img":"imgName"},'+
? ? ????????????'{"n":4,"img":"imgName"},'+
? ????????????? ']';
//'<li data-n="n"><img src="../imgName"></li>'用li標簽來放圖片 ? ??
var imgs=eval("("+json+")");//將接收到的json數據解析為數組
var imgsPanel=null; ? ? ? ? //包含圖片的li標簽的父級
var initImage=function(){ ? //將每個對象替換為li格式的字符串在放回數組
????????????for(var i=0;i<imgs.length;i++){
????????????????imgs[i]='<li data-n="'+imgs[i].i+'">'+
????????????????'<img src="../'+imgs[i].img+'"></li>'
????????}
????????imgsPanel.innerHTML=imgs.join(""); //將數組中的li組成字符串
}
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
2 回答無限滾動實現不了
4 回答無限滾動實現不了
3 回答不能實現無線滾動
2 回答transistion怎么實現無縫動畫滾動
1 回答急求??! 為什么我無法實現無線滾動效果?
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-10-31
//假設接收到的圖片數據如下json:
var json='['+
? ????????????? '{"n":0,"img":"imgName"},'+
? ????????????? '{"n":1,"img":"imgName"},'+
? ????????????? '{"n":2,"img":"imgName"},'+
? ????????????? '{"n":3,"img":"imgName"},'+
? ? ????????????'{"n":4,"img":"imgName"},'+
? ????????????? ']';
//'<li data-n="n"><img src="../imgName"></li>'用li標簽來放圖片 ? ??
var imgs=eval("("+json+")");//將接收到的json數據解析為數組
var imgsPanel=null; ? ? ? ? //包含圖片的li標簽的父級
var initImage=function(){ ? //將每個對象替換為li格式的字符串在放回數組
????????????for(var i=0;i<imgs.length;i++){
????????????????imgs[i]='<li data-n="'+imgs[i].i+'">'+
????????????????'<img src="../'+imgs[i].img+'"></li>'
????????}
????????imgsPanel.innerHTML=imgs.join(""); //將數組中的li組成字符串
}