廢話不多說了，直接給大家貼js代碼實(shí)現(xiàn)手寫圖片輪播的代碼了，代碼非常簡單，具體代碼如下所示：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js圖片輪播切換</title><style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2px solid #DCDCDC;margin: 100px auto;position: relative;} .imgCon span{display: block;position: absolute;left: 0px;width: 100%;height: 30px;background: #808080;text-align: center;font-size: 18px;line-height: 30px;} .numStyle{top: 0px;} .textStyle{bottom: 0px;} .imgCon strong{font-size: 30px;color: #000000;position: absolute;top: 50%;display: block;background: gray;cursor: pointer;} .imgCon .prev{left: 10px;} .imgCon .next{left: 370px;} img{width:400px;height: 400px;}</style></head><body> <div class="imgCon"> <span id="numCon" class="numStyle">加載中...</span> <span id="textCon" class="textStyle">加載中...</span> <strong id="prev" class="prev"><</strong> <strong id="next" class="next">></strong> <img src="" id="imgChange"/> </div> <script type="text/javascript"> var numCon = document.getElementById('numCon'); var textCon = document.getElementById('textCon'); var prev = document.getElementById('prev'); var next = document.getElementById('next'); var imgChange = document.getElementById('imgChange'); var imgArr = ['img/ad1.jpg','img/ad2.jpg','img/ad3.jpg','img/ad4.jpg']; var imgText = ['第一張','第二張','第三張','第四張']; var num = 0; //數(shù)字 圖片變化函數(shù) function imgTab(){ numCon.innerHTML = num+1 + '/' + imgArr.length; //數(shù)字變化 textCon.innerHTML = imgText[num]; //底部文字內(nèi)容變化 imgChange.src = imgArr[num]; //圖片變化 } imgTab(); //下一張 按鈕 next.onclick = function(){ num++; if(num == imgArr.length){ num = 0; } imgTab(); } //上一張 按鈕 prev.onclick = function(){ num--; if(num == -1){ num = imgArr.length-1; } imgTab(); } </script></body></html>以上所述是小編給大家介紹的純JavaScript手寫圖片輪播代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
