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';
}