js實現輪播圖特效
本文實例為大家分享了js實現輪播圖特效的具體代碼，供大家參考，具體內容如下
只需要修改圖片的src即可
html:
<body> <div id='rollImgBox'> <div class='photos clearfix'> <!--輪播圖里面首位多放最后一張與第一張圖片，以便順暢平滑切換--> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(7).jpg' alt=''></div> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(4).jpg' alt=''></div> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(5).jpg' alt=''></div> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(6).jpg' alt=''></div> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(7).jpg' alt=''></div> <div class='move'><img src='http://m.b3g6.com/bcjs/img/timg%20(4).jpg' alt=''></div> </div> <!--points圓點導航,js動態生成--> <div class='points'></div> <!--如果需要向左與向右的按鍵，引入方向圖片--> <span class='leftPoint'> < </span> <span class='rightPoint'> > </span> </div></body>
style:
*{ margin: 0; padding: 0;}.clearfix{ zoom: 1;}.clearfix:after{ content: ''; display: block; height: 0; visibility: hidden; clear: both;}#rollImgBox{ /*這里讓盒子居中，應用到具體頁面刪除即可*/ margin: 20px auto; /*如果該輪播圖不是獨占一行，需要將其改為行內塊元素*/ display: block; position: relative; /*在這里設置裝載圖片的框框的寬高*/ width: 947px; height: 585px; /*在這里設置邊框的樣式用outline，這樣就不會影響到后面的js了 /*加邊框，用outline即可，不會影響實際的距離*/ outline: 5px solid blue; overflow: hidden;}#rollImgBox .photos .move img{ /*在這里設置圖片的寬高，與邊框的寬高相同*/ width: 947px; height: 585px;}#rollImgBox .photos{ position: relative; /*移動的是圖片的寬度,左移947px*/ left: -947px;}#rollImgBox:hover{ cursor: pointer;}#rollImgBox .photos div{ float: left;}#rollImgBox .points{ position: absolute; /*在這里修改圓點導航的位置*/ bottom: 30px; right: 170px;/*右下方*/ text-align: center;}#rollImgBox .points span{ display: inline-block; /*在這里可以更改圓點的大小*/ text-align: center; line-height: 66px; font-size: 24px; font-family: 微軟雅黑; width: 66px; height: 66px; background: rgba(112,117,112,.6); border-radius: 50%; margin-left: 15px;}#rollImgBox .points .pointsNow{ background: rgba(62,255,49,.6);}/*左右按鈕*/#rollImgBox .leftPoint{ width: 60px; height: 60px; background: rgba(0,0,0,.5); text-align: center; line-height: 60px; position: absolute; font-size: 30px; color: white; top: 290px; left: 0;}#rollImgBox .rightPoint{ width: 60px; height: 60px; background: rgba(0,0,0,.5); text-align: center; line-height: 60px; position: absolute; font-size: 30px; color: white; top: 290px; right: 0;}#rollImgBox .leftPoint:hover{ background: rgba(255,0,0,.5);}#rollImgBox .rightPoint:hover{ background: rgba(255,0,0,.5);}
script:
window.onload = function(){ let rollImgBox = document.querySelector('#rollImgBox'); let photos = document.querySelector('#rollImgBox .photos'); let allimg = document.querySelectorAll('#rollImgBox .move img'); let index = 2; //動態設計移動圖片的框框寬高 //(rollImgBox.offsetWidth)是要剪去邊框的寬度 photos.style.width = (allimg.length)*(rollImgBox.offsetWidth) + 'px'; photos.style.height = rollImgBox.offsetHeight + 'px'; //動態創建小圓點 let point = new Array(); let points = document.querySelector('#rollImgBox .points'); for (let i=0;i<(allimg.length-2);i++){ point[i] = document.createElement('span'); point[i].innerHTML = (i+1); points.appendChild(point[i]); } point[0].className = 'pointsNow'; let rollImgIterval = setInterval(function () { //圖片的輪播 if (index === allimg.length){ photos.style.left = 0; index = 1; photos.style.transition = '0s'; point[0].className = 'pointsNow'; } else { photos.style.transition = '1.5s'; } photos.style.left = -(rollImgBox.offsetWidth)*index + 'px'; index++; //小圓點的變換 for (let j=0;j<(allimg.length-2);j++){ if (j === index-2){ point[j].className = 'pointsNow'; } else { point[j].className = ''; } } //這里是最后一張圖片（與展現的第一張一樣的圖）設置小圓點樣式 if (index === allimg.length){ point[0].className = 'pointsNow'; } },2000); //當用戶把鼠標放到rollImgBox盒子中，需要查看圖片，自動輪播停止 rollImgBox.onmouseover = function () { clearInterval(rollImgIterval); }; rollImgBox.onmouseout = function () { rollImgIterval = setInterval(function () { //圖片的輪播 if (index === allimg.length){ photos.style.left = 0; index = 1; photos.style.transition = '0s'; point[0].className = 'pointsNow'; } else { photos.style.transition = '1.5s'; } photos.style.left = -(rollImgBox.offsetWidth)*index + 'px'; index++; //小圓點的變換 for (let j=0;j<(allimg.length-2);j++){ if (j === index-2){ point[j].className = 'pointsNow'; } else { point[j].className = ''; } } //這里是最后一張圖片（與展現的第一張一樣的圖）設置小圓點樣式 if (index === allimg.length){ point[0].className = 'pointsNow'; } },2000); }; //點擊小圓點，跳轉到對應的圖片位置 for (let k=0;k<(allimg.length-2);k++){ point[k].onmousedown = function () { photos.style.left = -(rollImgBox.offsetWidth)*(k+1) + 'px'; //小圓點的變換 for (let j=0;j<(allimg.length-2);j++){ if (j === k){ point[j].className = 'pointsNow'; } else { point[j].className = ''; } } //點擊小圓點之后更改index的值 index = k+2; } } //點擊左右方向鍵，對圖片進行滑動 let leftPoint = document.querySelector(’#rollImgBox .leftPoint’); let rightPoint = document.querySelector(’#rollImgBox .rightPoint’); leftPoint.onclick = function () { photos.style.transition = '1s'; //向左滑動一張圖片，并修改index的值（index--） let dis = index-2; //當dis為1時，圓點到達第一個位置，如果再往左移動一個，圓點應該到達最后一個位置 if (dis < 1){ dis = allimg.length-2; photos.style.left = 0; point[dis-1].className = 'pointsNow'; point[0].className = ''; index = allimg.length; } else { photos.style.left = -(rollImgBox.offsetWidth)*dis + 'px'; point[dis-1].className = 'pointsNow'; point[dis].className = ''; } //從第一張順滑切換到最后一張 setTimeout(function () { if (photos.style.left === ’0px’){ photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-2) + 'px'; photos.style.transition = ’0s’; index = allimg.length-1; } },1000); index--; }; rightPoint.onclick = function () { photos.style.transition = '1s'; //向右滑動一張圖片，并修改index的值（index++） let dis = index-1; //當dis為5時，圓點到達最后一個位置，如果再往右移動一個，圓點應該到達第一個位置 if (dis >= (allimg.length-2)){ photos.style.left = -(rollImgBox.offsetWidth)*(allimg.length-1) + 'px'; point[0].className = 'pointsNow'; point[allimg.length-3].className = ''; index = 1; } else { photos.style.left = -(rollImgBox.offsetWidth)*index + 'px'; point[dis].className = 'pointsNow'; point[dis-1].className = ''; } //從最后一張順滑切換到第一張 setTimeout(function () { if (photos.style.left === ((-(rollImgBox.offsetWidth)*(allimg.length-1))+’px’)){ photos.style.left = -(rollImgBox.offsetWidth) + 'px'; photos.style.transition = ’0s’; index = 2; } },1000); index++; };};
更多關于輪播圖效果的專題，請點擊下方鏈接查看學習
javascript圖片輪播效果匯總
jquery圖片輪播效果匯總
Bootstrap輪播特效匯總
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網，大家繼續關注更多精彩焦點輪播圖。
相關文章：
網公網安備