一直在用ui框架实现走马灯效果,对原生的实现基本都不怎么熟悉了,所以特地写了个js原生轮播的效果
代码也很简单,不复杂,思路对上了就可以了
<div class="content" id="content">
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
<img src="" alt="" />
<span>正在计算中</span>
<p>文字说明正在加载中</p>
<ul>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
思路一:js代码 清空所有的当前状态,给当前的li加active
window.onload = function () {
var oDiv = document.getElementById("content");
var oImg = oDiv.getElementsByTagName("img")[0];
var oSpan = oDiv.getElementsByTagName("span")[0];
var oP = oDiv.getElementsByTagName("p")[0];
var oLi = oDiv.getElementsByTagName("li");
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var arrUrl = ["./img/pic1.jpg", "./img/pic2.jpg", "./img/pic3.jpg"];
var arrText = ["促销海报1", "促销海报2", "促销海报3"];
//初始化数据
let count = 0;
let timer = null;
setTimeout(() => {
tab();
}, 3000);
for (let index = 0; index < oLi.length; index++) {
const element = oLi[index];
element.index = index;
element.onclick = function () {
count = this.index;
for (var i = 0; i < oLi.length; i++) {
oLi[i].className = "";
}
this.className = "active";
tab();
};
}
oPrev.onclick = function () {
count--;
if (count === -1) {
count = arrUrl.length - 1;
}
tab();
};
oNext.onclick = function () {
count++;
if (count === arrUrl.length) {
count = 0;
}
tab();
};
//初始化数据
function tab() {
oImg.src = arrUrl[count];
oP.innerHTML = arrText[count];
oSpan.innerHTML = count + 1 + "/" + arrUrl.length;
oLi[count].className = "active";
}
autoPlay();
function autoPlay() {
timer = setInterval(() => {
count++;
if (count === arrUrl.length) {
count = 0;
}
for (var i = 0; i < oLi.length; i++) {
oLi[i].className = "";
}
tab();
}, 2000);
}
oDiv.onmouseover = function () {
clearInterval(timer);
};
oDiv.onmouseout = function () {
autoPlay();
};
};
思路一:js代码 记住上一个的active状态,清空然后给当前的li加active
window.onload = function () {
var oDiv = document.getElementById("content");
var oImg = oDiv.getElementsByTagName("img")[0];
var oSpan = oDiv.getElementsByTagName("span")[0];
var oP = oDiv.getElementsByTagName("p")[0];
var oLi = oDiv.getElementsByTagName("li");
var oPrev = document.getElementById("prev");
var oNext = document.getElementById("next");
var arrUrl = ["./img/pic1.jpg", "./img/pic2.jpg", "./img/pic3.jpg"];
var arrText = ["促销海报1", "促销海报2", "促销海报3"];
//初始化数据
let count = 0;
let oldLi = null; //保存上一个当前状态
let timer = null;
setTimeout(() => {
tab();
}, 3000);
for (let index = 0; index < oLi.length; index++) {
const element = oLi[index];
element.index = index;
element.onclick = function () {
count = this.index;
oldLi.className = ""; //清空上一个的当前状态
this.className = "active";
oldLi = oLi; //重置当前的状态
tab();
};
}
oPrev.onclick = function () {
oldLi.className = "";
count--;
if (count === -1) {
count = arrUrl.length - 1;
}
tab();
};
oNext.onclick = function () {
oldLi.className = "";
count++;
if (count === arrUrl.length) {
count = 0;
}
tab();
};
//初始化数据
function tab() {
oImg.src = arrUrl[count];
oP.innerHTML = arrText[count];
oldLi = oLi[count];
oSpan.innerHTML = count + 1 + "/" + arrUrl.length;
oLi[count].className = "active";
}
autoPlay();
function autoPlay() {
timer = setInterval(() => {
oldLi.className = "";
count++;
if (count === arrUrl.length) {
count = 0;
}
tab();
}, 2000);
}
oDiv.onmouseover = function () {
clearInterval(timer);
};
oDiv.onmouseout = function () {
autoPlay();
};
};