js代码编写无缝轮播图

这篇文章主要为大家详细介绍了js代码编写无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了js编写无缝轮播图的具体代码，供大家参考，具体内容如下

前言

这个是一个轮播图

提示：

请让最后一个img和第一个img是一张图片相同且 li数目为img数目-1；

一、无缝轮播图

让第一张和最后一张相同type:第一张和最后一张相同；在最后一张向下一张切换时，立刻跳到第一张 然后向第二张正常切换

二、使用步骤

1.html代码

代码如下（示例）：

<div class="banner"> <div class="qh"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="left"></div> <div class="right"></div> <ul class="banner_img clear"> <li> <img src="img/1.png" alt=""> </li> <li> <img src="img/2.png" alt=""> </li> <li> <img src="img/3.png" alt=""> </li> <li> <img src="img/4.png" alt=""> </li> <li> <img src="img/5.png" alt=""> </li> <li> <img src="img/6.png" alt=""> </li> <li> <img src="img/7.png" alt=""> </li> <li> <img src="img/1.png" alt=""> </li> </ul></div>

css代码

*{ margin:0; padding:0;} .banner { position: relative; margin: auto; margin-top: 20px; width: 1140px; height: 600px; border: 1px solid #000; overflow: hidden; } .banner ul { position: relative; width: 10000px; } .banner ul li { width: 1140px; height: 100%; float: left; } .banner ul img { width: 1140px; height: 100%; object-fit: cover; } .banner>div { position: absolute; } .banner .qh { position: absolute; bottom: 0; right: 0; height: 20px; z-index: 1; } .banner .qh div { margin-right: 10px; width: 10px; height: 10px; background: transparent; border: 1px solid #f0f; border-radius: 5px; float: left; z-index: 1; } .left{ top: 0; bottom: 0; margin: auto; height: 40px; width: 20px; background: #f0f; left: 0; z-index: 1; } .right{ top: 0; bottom: 0; margin: auto; height: 40px; background: #f0f; width: 20px; right: 0; z-index: 1; }

2.js代码

代码如下：

startMove是一个运动框架 缓冲运动；当然你也可以用其他的

var odiv = document.querySelector(".banner");var oul = document.querySelector(".banner_img");var aimg = oul.querySelectorAll("img");var oqh = document.querySelector(".qh")var aqh_div = oqh.querySelectorAll("div");var alist = aimg[0].offsetWidth;var i=0; init(); function init(){ for (var j=0; j<aimg.length-1;j++) { aqh_div[j].style.background="transparent"; } if (i<aimg.length-1) { aqh_div[i].style.background="#f0f"; }else{ aqh_div[0].style.background="#f0f"; } } function next() {//下一张 i++; let left =i*(-alist); if (left <= -alist * (aimg.length)) { oul.style.left = "0px"; i=1; left =-alist*i; } startMove(oul, { left: left }); init(); } function back() {//上一张 i--; let left = i*(-alist); if(i<0) { oul.style.left = (aimg.length-1)* (-alist)+"px"; i=aimg.length-2; left= i*(-alist); } startMove(oul, { left: left }); init(); } function move(i) {//跳到第i张 i从0开始 window.i=i; left = i* (-alist); startMove(oul, { left: left }); init(); } for (let i in aqh_div) { aqh_div[i].onclick = function () { move(i); console.log(i); } }//下面是一个移入div暂停计时器 移出打开计时器 odiv.Interval = setInterval(next, 2000); odiv.onmouseenter = function () { clearInterval(odiv.Interval); }; odiv.onmouseleave = function () { clearInterval(odiv.Interval); odiv.Interval = setInterval(next, 2000); };//下面是两个左右切换的按钮 var left_btn=document.querySelector(".left"); var right_btn=document.querySelector(".right"); left_btn.onclick=function(){ back(); } right_btn.onclick=function(){ next(); }//下面是一个运动框架 第一个参数是运动的对象 第二个为json对象{要改变的属性：值}// 第三个为运动结束后要做到事情 参数是一个函数 /** * * @param obj 运动的对象 * @param json {width:400, height:400} * @param fnEnd回调 */ function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function () { var bStop = true; for (attr in json) { // 1. 取得当前的值（可以是widht，height，opacity等的值） var objAttr = 0; if (attr == "opacity") { objAttr = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { objAttr = parseInt(getStyle(obj, attr)); } // 2.计算运动速度 var iSpeed = (json[attr] - objAttr) / 50;//缓冲运动 iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); // 3. 检测所有运动是否到达目标 if (objAttr != json[attr]) { bStop = false; } if (attr == "opacity") { obj.style.filter = 'alpha(opacity=' + (objAttr + iSpeed) + ')'; obj.style.opacity = (objAttr + iSpeed) / 100; } else { obj.style[attr] = objAttr + iSpeed + 'px';// 需要又.属性名的形式改成[] } } if (bStop) { // 表示所有运动都到达目标值 clearInterval(obj.timer); if (fn) { fn(); } } }, 10); } /** * 获取行间/内联/外部样式，无法设置 * @param obj * @param attr */ function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; } }

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• 0
• 0
• 0
• 0
• 0