12.4带说明幻灯片

最新推荐文章于 2024-11-05 17:44:29 发布

代码-君

最新推荐文章于 2024-11-05 17:44:29 发布

阅读量402

点赞数

分类专栏： js基础教程随书笔记文章标签：图片索引

js基础教程随书笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var currImg = 0; //初始化变量为0
var captionText = ["第一幅","第二幅","第三幅","第四幅","第五幅","第六幅","第七幅","第八幅","第九幅","第十幅"];
function initAll(){
document.getElementById("imgText").innerHTML = captionText[0]; //id为imgText的div文本内容为 captionText第一个元素
document.getElementById("prevLink").onclick = function(){ //点击prevLink按钮调用newSlide函数并且给函数传入参数-1
newSlide(-1);
}
document.getElementById("nextLink").onclick = function(){
newSlide(1);
}
};
function newSlide(direction){
var imgCt = captionText.length; //数组的长度赋值给imgCt 10
currImg = currImg + direction; //currImg变量重新被赋值为 0+1 或者 0+(-1)
if(currImg < 0){ //-1的时候
currImg = imgCt-1; // currImg变量重新赋值为数组长度减1 10-1
}
if(currImg == imgCt){ //currImg值等于数组长度时候最后一张
currImg = 0; //重新被赋值为0
}
document.getElementById("slideshow").src = "images/slideImg"+currImg+".jpg"; //图片src属性设置为images/0-10.jpg
document.getElementById("imgText").innerHTML = captionText[currImg];//id为imgText的div文本内容为captionText[0-10] 和图片的数字对应
};
window.onload = initAll;
/*
第一次点击prevLink调用newSlide(-1) 函数的传入的参数为-1 directionw为-1 imgCt为数组的长度10
currImg = 0+(-1); currImg被赋值为-1
if(currImg<0){       == if(-1<0){
currImg = imgCt-1         currImg重新赋值为10-1=9
}                       }
document.getElementById("slideshow").src = "images/slideImg"+9+".jpg";
document.getElementById("imgText").innerHTML = captionText[9]; 数组索引从0开始 9就是最后的一个元素
第一次点击prevLink调用newSlide(-1) 函数的传入的参数为-1 directionw为-1 imgCt为数组的长度10
currImg = currImg重新赋值为9+(-1); currImg重新赋值8
if(currImg < 0){          8不小于0 所以跳过这部分执行下部分代码
currImg = imgCt-1;
}
document.getElementById("slideshow").src = "images/slideImg"+8+".jpg";
document.getElementById("imgText").innerHTML = captionText[8]; 数组索引从0开始 9就是从右向左第二个元素
一次类推一直到currImg重新被赋值为0 进行第二轮从9-0的循环操作
*/
</script>
</head>