js切换图片

javascript左右键切换图片

js代码展示

<script>
	var img = document.getElementsByTagName('img');
	var spans = document.getElementsByTagName('span');
	var left = document.getElementById('left');
	var right = document.getElementById('right');
	var now = 0;  //当前图所在位置

	for( var i =0; i < spans.length; i++){
		spans[i].index = i;
		spans[i].onclick = function(){
			for( var j = 0; j < spans.length; j++){
				img[j].style.display = 'none';
				spans[j].className = '';
			}
			this.className = 'active';
			img[this.index].style.display = 'block';
		}
	}

	
	// 点击左键切换
	left.onclick = function(){
		now--; //顺序递减
		if(now < 0){
			now = 4; //最后一张图片
		}
		for( j = 0; j < spans.length; j++){
			img[j].style.display = 'none';
			spans[j].className = '';
		}
		img[now].style.display = 'block';
		spans[now].className = 'active';
	}

	// 点击右键切换
	right.onclick = function(){
		now++; //顺序递增
		if(now >= 5){ 
			now = 0; //返回角标为0的第一张图片
		}
		for( j = 0; j < spans.length; j++){
			img[j].style.display = 'none';
			spans[j].className = '';
		}
		img[now].style.display = 'block';
		spans[now].className = 'active';
	}