web前端全系列 教程
1839个小节阅读:2244.1k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
xxxxxxxxxx
// 1. 获取元素
var imglis = document.getElementById("imglist").querySelectorAll("li");
var leftBtn = document.getElementById("left");
var rightBtn = document.getElementById("right");
var circlelis = document.getElementById("circle").querySelectorAll("li");
// idx控制图片显示
var idx = 0;
leftBtn.onclick = function () {
idx++
console.log(idx);
changePic();
}
rightBtn.onclick = function () {
idx--
console.log(idx);
changePic();
}
// 2. 控制页面图片显示与隐藏
function changePic() {
// idx边界处理
if (idx > imglis.length - 1) {
idx = 0;
}
if (idx < 0) {
idx = imglis.length - 1;
}
// 先把所有的current都移除,然后给对一个的那个元素添加显示就行了
for (var i = 0; i < imglis.length; i++) {
imglis[i].removeAttribute("class");
}
imglis[idx].setAttribute("class", "current");
for (var i = 0; i < circlelis.length; i++) {
circlelis[i].removeAttribute("class");
}
// 设置指示器高亮
circlelis[idx].setAttribute("class", "current")
}
// 点击指示器切换图片
for(var i = 0;i<circlelis.length;i++){
(function(i){
circlelis[i].onclick = function(){
idx = i;
changePic();
}
})(i)
}
// for (var i = 0; i < circlelis.length; i++) {
// // 自定义属性的方式处理
// circlelis[i].idxx = i;
// circlelis[i].onclick = function () {
// // 不就是获取不到i的值
// idx = this.idxx;
// changePic();
// }
// }