(编辑:jimmy 日期: 2024/12/24 浏览:2)
本文实例为大家分享了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="/UploadFiles/2021-04-02/1.png">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 "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图片轮播
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。