零JS筆記 | 最簡單的圖片切換 | index
最簡單的圖片切換一
window.onload = function () {
var _prev = document.getElementById('prev'),
_next = document.getElementById('next'),
_txt = document.getElementById('txt'),
_count = document.getElementById('count'),
_img = document.getElementById('img'),
num = 0,
imgDate = {
txt: ['校園美女一','校園美女二','校園美女三',
'校園美女四','校園美女五','校園美女六'],
img: ['../img/jc1.png','../img/jc2.png','../img/jc3.png',
'../img/jc4.png','../img/jc5.png','../img/jc6.png']
}
//初始化
tabImg()
var len = imgDate.txt.length;
_next.onclick = function () {
num++;
if (num == len) {
num = 0;
}
tabImg()
}
_prev.onclick = function () {
num--;
if (num == - 1) {
num = len - 1
}
tabImg()
}
function tabImg() {
_txt.innerHTML = imgDate.txt[num];
_count.innerHTML = (num + 1) + '/' + len;
_img.src = imgDate.img[num];
}
}
最簡單的圖片切換二
注意:this指向；
步驟：初始化，寫循環每一個，合並函數[num = this.index;tab()]，注意this指向；
on切換：1、全清空，當前添加；2、創建上一個狀態變量：prevLi = null; 清空上一個
for (var i = 0; i < lis.length; i++) {
lis[i].className = '' //全清空
}
this.className = 'on'//當前添加
var prevLi = null;
prevLi = li[num]; //先存上一個狀態；
prevLi.className = '' //點擊時把上一個狀態清除
prevLi = this; //再把當前付給上一個，形成循環
this.className = 'on' //當前添加菜單收縮
1、關鍵在於找元素；配合index，找到每一個h2，對應自已的ul；
2、每一個ul下，對應自己的li，即需要for套for；
3、for套for中，有fn的，不需要改i,無fn的，需要改變j；
4、判斷的方法，this.className = '';
5、找到li，因事件一致，可先存在數組裏，以數組來操作;
<ul id='list'>
<li>
<h2>aaaaaa</h2>
<ul>
<li> a-a-a-a-a-a</li>
<li> a-a-a-a-a-a</li>
<li> a-a-a-a-a-a</li>
</ul>
</li>
.....
</ul>var list = document.getElementById('list')
var h2 = document.getElementsByTagName('h2')
var _ul = list.getElementsByTagName('ul')
var _li = null;
var arrLi = [
];
var on = true;
for (var i = 0; i < h2.length; i++) {
h2[i].index = i; //索引值對應 每個 h2 -> ul
h2[i].onclick = function () {
if (this.className == '') {
//1、當前展開，其他收縮
for (var i = 0; i < _ul.length; i++) {
_ul[i].style.display = 'none'
h2[i].className = ''
}
_ul[this.index].style.display = 'block'
this.className = 'on'
}
else {
_ul[this.index].style.display = 'none'
this.className = ''
}
}
}
for (var i = 0; i < _ul.length; i++) { //找到所有h2下 ul
_li = _ul[i].getElementsByTagName('li') //找到所有li
for (var j = 0; j < _li.length; j++) {
arrLi.push(_li[j]); //所有li存放在arrLi裏
}
}
//for 套for ，內部的fn,可不改i，無fn，必須改i
for (var i = 0; i < arrLi.length; i++) { //操作數組，即相當於操作li
arrLi[i].onclick = function () {
//2、當前點擊取消
if (this.className == '') {
for (var i = 0; i < arrLi.length; i++) {
arrLi[i].className = ''
}
this.className = 'hover'
}
else {
this.className = ''
}
}
}
See the Pen doxZvW by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>