(编辑：jimmy 日期: 2024/12/28 浏览：2)
本文实例为大家分享了js实现轮播图特效的具体代码，供大家参考，具体内容如下
只需要修改图片的src即可
html:
<body> <div id="rollImgBox"> <div class="photos clearfix"> <!--轮播图里面首位多放最后一张与第一张图片，以便顺畅平滑切换--> <div class="move"><img src="/UploadFiles/2021-04-02/timg%20(7).jpg">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轮播特效汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持，大家继续关注更多精彩焦点轮播图。