600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > html中js左右图片切换效果 JS实现图片切换特效

html中js左右图片切换效果 JS实现图片切换特效

时间:2018-10-11 01:11:35

相关推荐

html中js左右图片切换效果 JS实现图片切换特效

本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下

知识点:

1.window.onload网页全部加载完后再执行

2.获取元素 设置属性

3.临界情况判断

运行效果:

点击上一张下一章切换图片

代码:

Title

#box{

width: 1200px;

margin: 0 auto;

}

上一张

下一张

window.onload = function (ev) {

// 1. 获取标签

var prep = document.getElementById('prep');

var next = document.getElementById('next');

var icon = document.getElementById('icon');

// 2. 点击

var currentIndex = 1, minIndex=1, maxIndex=10;

prep.onclick = function (ev1) {

if (currentIndex === minIndex){

currentIndex = maxIndex;

}else{

currentIndex--;

}

icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');

};

next.onclick = function (ev1) {

if (currentIndex === maxIndex){

currentIndex = minIndex;

}else {

currentIndex++;

}

icon.setAttribute('src','images/阿鲁'+ currentIndex +'.gif');

}

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。