具體實現(xiàn)步驟：

????????2.1?點擊右箭頭?讓圖片依次往后進(jìn)行切換??如果切換到最后一張?回到第一張?1--2--3--4--1

????????????????????????2.1.1?獲取元素?按鈕?p?img

????????????????????????2.1.2?添加事件?加給按鈕

????????????????????????2.1.3?圖片切換到下一張

????????????????????????2.1.4?不知道是第幾張圖?假設(shè)?n?=?1??

????????????????????????2.1.5?更新img的地址?img.src?=?'';

????????????????????????2.1.6?圖片+1?之后?判斷是不是已經(jīng)是最后一張?如果n?==?5??n?=?1

????????2.2?點擊左箭頭?讓圖片依次往前切換?如果是第一張?回到最后一張?1--4--3--2--1

????????????????????????2.2.1?獲取元素?按鈕?p?img

????????????????????????2.2.2?添加事件?加給按鈕

????????????????????????2.2.3?圖片切換到上一張

????????????????????????2.2.4?通過?n?獲取當(dāng)前是第幾張圖片??

????????????????????????2.2.5?更新img的地址?img.src?=?'';

????????????????????????2.2.6?圖片-1?之后?判斷是不是已經(jīng)是第一張?如果n?==?0??n?=?4

<style>* {padding: 0;margin: 0;}.wrap {position: relative;width: 700px;height: 400px;margin: 10px auto;}.wrap p {color: #fff;text-align: center;line-height: 20px;background-color: #000;}.wrap img {vertical-align: middle;width: 100%;height: 360px;}.wrap button {width: 30px;height: 30px;font-size: 20px;color: #fff;background: rgba(0, 0, 0, 0.5);text-align: center;line-height: 30px;outline: none;position: absolute;top: 50%;margin-top: -15px;}.btn1 {right: 0;}.btn2 {left: 0;}</style> <div class="wrap"><p>1/4</p><img src="./img1.jpg" alt=""><p>動漫1</p><button class="btn1">&gt;</button><button class="btn2">&lt;</button></div> <script>//1、獲取元素 按鈕 p imgvar img = document.getElementsByTagName('img')[0];var btns = document.getElementsByTagName('button');var ps = document.getElementsByTagName('p');console.log(btns, img, ps);//4、不知道照片處于第幾張 假設(shè)一個變量存初始值var n = 1;//2、添加事件 加給按鈕 btnsbtns[0].onclick = function () {//3、寫具體代碼操作 n++;console.log(n);if (n == 5) {n = 1}//5、圖片切換到下一張img.src = './img' + n + '.jpg'//獲取p標(biāo)簽內(nèi)容//設(shè)置p標(biāo)簽內(nèi)容里面的數(shù)字ps[0].innerHTML = n + '/4';ps[1].innerHTML = '動漫' + n;}btns[1].onclick = function () {//3、寫具體代碼操作 圖片切換到下一張n--;console.log(n);if (n == 0) {n = 4}//5、切換圖片img.src = './img' + n + '.jpg'//獲取p標(biāo)簽內(nèi)容//設(shè)置p標(biāo)簽內(nèi)容里面的數(shù)字ps[0].innerHTML = '' + n + '/4';ps[1].innerHTML = '動漫' + n;}</script>

效果：

?

?

總結(jié)

以上是生活随笔為你收集整理的js实现轮播图点击按钮切换下一张图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。