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图片轮播

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

您可能感兴趣的文章: