零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>