建站
咨詢
售后
建站咨詢
新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
JavaScript實現(xiàn)旋轉(zhuǎn)輪播圖-創(chuàng)新互聯(lián)
最近一直在學(xué)習JavaScript，然后看到旋轉(zhuǎn)輪播圖的案例，就嘗試著用js做了一個簡單的輪播圖，因為無法顯示動態(tài)效果：
這個效果是這樣的：一共有7張圖片，它們會自動地向左滑動，然后左右箭頭也可以控制輪播圖的左滑和右滑，同時，如果鼠標停在圖片上，那么輪播圖會停止自動滑動，當鼠標移開時，將會繼續(xù)向左輪播。
首先，我這里封裝了兩個函數(shù)（因為暫且還沒有學(xué)jQuery，所以用了封裝函數(shù)的方法來實現(xiàn)），第一個函數(shù)是$函數(shù)，調(diào)用可以獲取html中的元素，代碼如下：
`function $(select){
if (typeof select != 'string') {
console.log('傳入的參數(shù)有誤');
return null;
}
var firstChar = select.charAt(0);
switch(firstChar){
case '#':
return document.getElementById(select.substr(1));
break;
case '.':
if (document.getElementsByClassName){
return document.getElementsByClassName(select.substr(1));
} else {
var result = [];
var allElemnts = document.getElementsByTagName('*');
console.log(allElemnts);
for (var i = 0; i < allElemnts.length; i++){ var e = allElemnts[i]; var className = e.className; var classArr = className.split(' '); for (var j = 0; j < classArr.length; j++){ var c = classArr[j]; if (c == select.substr(1)) { result.push(e); break; } } } return result; } break; default : return document.getElementsByTagName(select); } }`
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
文章題目：JavaScript實現(xiàn)旋轉(zhuǎn)輪播圖-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://fisionsoft.com.cn/article/ccdsdo.html
