JS实现图片切换特效(IT技术) |
您所在的位置：网站首页 › js实现图片切换 › JS实现图片切换特效(IT技术) |
JS实现图片切换特效(IT技术)
|
本文实例为大家分享了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');
}
}
相关文章JS实现简易留言板特效JS实现关闭小广告特效使用JS location实现搜索框历史记录功能node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例node.js事件轮询机制原理知识点高性能js数组去重(12种方法，史上最全)angularjs模态框的使用代码实例js正则匹配多个全部数据问题JS实现简易留言板特效JS实现关闭小广告特效
|
【本文地址】