题目阐述
用户通过点击可以切换图片背景。
- 第一种：中间的一列的轮播
- 用户点击图中中间位置带序号的类似按钮，
- 背景会切换到对应的背景图片，且点亮当前点击后的类似按钮，
- 当点击下一个按钮时，背景图片会切换，并且当前类似按钮点亮，其他类似按钮恢复。
- 第二种：左右两边的轮播
- 用户点击图中左端或者右端位置带的类似按钮，
- 背景会按顺序背景图片，
- 并且若左端切换到第一张，又会从最后一张开始，
- 若右端切换到最后一张，又会从第一张开始。
实现思路
第一种：中间的一列的轮播
- 首先获取图片地址数组的长度，由长度确定创建多少个类似按钮（按钮数当然也可以是固定的），
- 然后给每一个虚拟按钮绑定点击事件 ，
- 点击事件的内容就是修改当前背景图片地址，而地址由点击的按钮的下标决定。
- 如：点击第一个虚拟按钮就，显示第一张图片；点击第二个，显示第二张。。。
代码示例
var imgArr = ["pic0.jpg", "pic1.jpg", "pic2.jpg", "pic3.jpg"];
//生成轮播按钮，按钮个数由图片数组长度决定
var fn0 = (leng) => {
var ul = document.querySelector("ul");
//有多少张图片就创建多少个li
for (i = 0; i < leng; i++) {
var li = document.createElement("li");
li.innerHTML = i + 1;
ul.appendChild(li);
}
}
fn0(imgArr.length);
//中间的一列的轮播事件触发函数
var fn1 = () => {
var img = document.querySelector("img");
var lis = document.querySelectorAll("ul>li");
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//做法思路一：修改css属性
for (var v of lis) {
v.style.backgroundColor = "#000000";
}
this.style.backgroundColor = "pink";
img.src = "./images/" + imgArr[this.innerHTML - 1];
//做法思路二：添加或移除class
// for (var v of lis) {
// v.classList.remove("blue");
// }
// this.classList.add("blue");
// img.src = imgArr[this.innerHTML - 1];
}
}
}
fn1();
第二种：左右两边的轮播
- 获取到当前图片地址在数组存放的下标 ，
- 获取到左边和右边的类似按钮元素，
- 给左/右边的类似按钮元素绑定点击事件，
- 点击事件要做到：
- 每点击左边类似按钮一次，图片索引值减一；如果切换到第一张，让索引值等于最后一张的索引值；
- 反之，点击右边类似按钮一次，图片索引值加一；切换到最后一张，让索引值等于第一张的索引值。
代码示例
//左右两边的轮播事件触发函数
var fn2 = () => {
var left = document.querySelector(".left");
var right = document.querySelector(".right");
var img = document.querySelector("img");
//获取当前图片位置下标
var index = img.src.split("/");
index = index[index.length - 1];
index = imgArr.indexOf(index);
left.onclick = function () {
if (index == 0) {
index = imgArr.length;
}
index -= 1;
img.src = "./images/" + imgArr[index];
}
right.onclick = function () {
if (index == imgArr.length - 1) {
index = -1;
}
index += 1;
img.src = "./images/" + imgArr[index];
}
}
fn2()
总结
当然了，这只是粗糙的实现了轮播的效果；要实现炫目的轮播效果，可以合理的采用延时器，实现自动播放；添加透明度增加契合度等等，实现功能是最重要的第一步。
