如何實現前端頁面輪播？ 三種方式

2021-09-24 09:06:47 字數 1491 閱讀 5214

夜深了，只聽見時鐘的嘀嗒聲和鍵盤的敲打聲，想必這個時候只剩下程式設計師的工作了。好久沒更新了，難得有空來寫寫自己這些天的所學。

下面著重介紹幾種方式：

先給大家看個效果圖

方式3：原生js實現（相對初學者更適用）

相對來說更適合新學的人來實現

主要實現原理：

div:

js

var jx_speed = 5000; //輪播時間設定


var jxlunbo = document.getelementbyid("lunbo");


var num = 1;


var time1 = setinterval(getlunbo, jx_speed);


function getlunbo() 


jxlunbo.src = "img/3_" + num + ".png";


}
其中主要實現的方法是通過改變img標籤中的src

方式2：jquery實現左右翻動，下方有懸浮按鈕的情況

div

< 


>
js

function func_1(),4000);


}function func_2(), 4000);


$("#box ol li").hover(function())


}
方式1，類似翻動相簿一樣的效果(中間放大)div

例項2<


>
js

function left() 


curl[i] = imgurl[k];


tlarr[i] = titlearr[k];


$(".img_1_" + (i+1)).css();


}debugger;


imgurl = curl;


titlearr = tlarr;


$(".text_detail").html(titlearr[1]);


debugger;


}function right() 


curl[i] = imgurl[k];


tlarr[i] = titlearr[k];


$(".img_1_" + (i + 1)).css();


}imgurl = curl;


titlearr = tlarr;


$(".text_detail").html(titlearr[1]);


debugger;


}
實現原理主要是改變其background-images,存放在乙個陣列裡面遍歷。

前端匯出功能實現的三種方式

1 window.location.href url 2 這種方式就是後台將要匯出的檔案以檔案流的方式返回給前端，前端通過blob去解析，再動態建立a標籤。發請求 this.axios.post url,then res 這種方式就是後台只需提供對應的資料即可，前端動態生成 資料，再格式化。let ...

json三種實現方式

size large 使用ajax的開發專案過程中，經常需要將json格式的字串返回到前端，前端解析成js物件 json ecma 262 e3 中沒有將json概念寫到標準中，還好在 ecma 262 e5 中json的概念被正式引入了，包括全域性的json物件和date的tojson方法。1，e...

cmdb實現三種方式

為什麼要做cmdb？1 實現運維自動化，cmdb是實現運維自動化的基石 2 之前做資產統計的時候，使用execl來統計，為了年底資產審計方便 3 運維日常工作繁瑣，4 執行環境不統一 agent方式實現 agent方式，可以將伺服器上面的agent程式作為定時任務，定時將資產資訊提交到指定api錄入...