【JavaScript】用原生js实现幻灯片效果

github地址：https://github.com/MeichaoWen/JSInstance

<script>
	function getByClass(oParent, sClass) {
		aEle = document.getElementsByTagName('*');
		var arr = [];
		for (var i = 0; i < aEle.length; i++) {
			if (aEle[i].className == sClass) {
				arr.push(aEle[i])
			}
		}
		return arr;
	}
	window.onload = function () {
		var oDiv = document.getElementById('playimages');
		var oDivPrev = getByClass(oDiv, 'prev')[0]
		var oDivNext = getByClass(oDiv, 'next')[0]
		var oDivMrak_left = getByClass(oDiv, 'mark_left')[0]
		var oDivMark_right = getByClass(oDiv, 'mark_right')[0]
		var oSmall = getByClass(oDiv, 'small_pic')[0]
		var aLiSmall = oSmall.getElementsByTagName('li')
		var oBig = getByClass(oDiv, 'big_pic')[0]
		var aLiBig = oBig.getElementsByTagName('li')
		var oUlSmall = oSmall.getElementsByTagName('ul')[0]
		oUlSmall.style.width = aLiSmall[0].offsetWidth * aLiSmall.length + 'px'
		//左右按钮
		oDivPrev.onmouseover = oDivMrak_left.onmouseover = function () {
			startMove(oDivPrev, 'opacity', 100)
		}
		oDivPrev.onmouseout = oDivMrak_left.onmouseout = function () {
			startMove(oDivPrev, 'opacity', 0)
		}
		oDivNext.onmouseover = oDivMark_right.onmouseover = function () {
			startMove(oDivNext, 'opacity', 100)
		}
		oDivNext.onmouseout = oDivMark_right.onmouseout = function () {
			startMove(oDivNext, 'opacity', 0)
		}
		//小图点击
		var nowZIndex = 2
		var now = 0
		for (var i = 0; i < aLiSmall.length; i++) {
			aLiSmall[i].index = i

			aLiSmall[i].onclick = function () {
				if (this.index == now) return;
				now = this.index
				tab()
			}
			aLiSmall[i].onmouseover = function () {
				startMove(this, 'opacity', 100)
			}
			aLiSmall[i].onmouseout = function () {
				if (this.index != now) {
					startMove(this, 'opacity', 60)
				}
			}
		}
		function tab() {
			aLiBig[now].style.height = 0
			aLiBig[now].style.zIndex = nowZIndex++
			for (var i = 0; i < aLiSmall.length; i++) {
				startMove(aLiSmall[i], 'opacity', 60)
			}
			startMove(aLiSmall[now], 'opacity', 100)
			startMove(aLiBig[now], 'height', 320)
			if (now == 0) {
				startMove(oUlSmall, 'left', 0)
			} else if (now == aLiSmall.length - 1) {
				startMove(oUlSmall, 'left', -(now - 2) * aLiSmall[0].offsetWidth)
			} else {
				startMove(oUlSmall, 'left', -(now - 1) * aLiSmall[0].offsetWidth)
			}

		}
		oDivPrev.onclick = function () {
			now--
			if (now == -1) {
				now = aLiSmall.length - 1
			}
			tab()
		}
		oDivNext.onclick = function () {
			now++
			if (now == aLiSmall.length) {
				now = 0
			}
			tab()
		}
		var timer = setInterval(oDivNext.onclick, 2000)
		oDiv.onmouseover = function () {
			clearInterval(timer)

		}
		oDiv.onmouseout = function () {
			timer = setInterval(oDivNext.onclick, 2000)
		}

	}
</script>