学习js，写了一个js实现简易的轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript">
window.onload=function(){
var imgs=document.getElementsByTagName("img");//获取img元素，才能修改src的值
var but1=document.getElementById("shang");//获取上一张按钮元素，为点击事件写函数
var but2=document.getElementById("next");//获取下一张按钮元素，为点击事件写函数
var pic=["img/hoary-head.jpg",//将所有轮播图片的URL放到一个数组当中，轮播时从里面取出图片，将图片换为自己的即可使用
"img/music_01.jpg",
"img/music.jpg",
"img/school.jpg",
"img/travel_02.jpg"];
var index=0;//变量，用作数组下标
var str=document.getElementById("tishi");//获取p标签，轮播提示语
str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
but1.onclick=function(){//上一张按钮的单击事件函数。
index--;
if(index<0)//当图片是第一张是，再上一张就会没有值，将index修改为数组的最后一个下标值，实现循环轮播
index=pic.length-1;
imgs[0].src=pic[index];//将img元素里的src属性修改，实现图片切换
str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
}
but2.onclick=function(){
index++;
if(index>=pic.length)
index=0;
imgs[0].src=pic[index];
str.innerHTML="总共"+pic.length+"张照片，"+"这是第"+(index+1)+"张照片";
}
}
</script>
</head>
<body>
<div id="touch">
<p id="tishi"></p>
<img src="img/hoary-head.jpg" align="图片"/><br />
<button id="shang">上一张</button>
<button id="next">下一张</button>
</div>
</body>
</html>
- Java学习笔记——实现一个简易记事本Notepad的编写
- JS+DIV 实现轮播图（二） （慕课网 学习笔记）
- JS实现简易图片轮播效果的方法
- 用原生JS实现一个轮播（包含全部代码和详细思路）
- js实现简易轮播图
- JS学习笔记1——不要使用JavaScript内置的parseInt()和Number()函数，利用map和reduce操作实现一个string2int()函数
- js 实现一个简单的3D轮播效果
- JS学习之一个简易的日历控件
- Vue.js学习 Item16 – 实现一个自定义分页组件vue-paginaiton
- Android开发学习笔记（十）实现一个简易的开场界面
- JavaScript学习——使用JS实现首页轮播图效果
- js实现图片轮播效果学习笔记
- 原生js通过一行代码实现简易轮播图
- 学习笔记之js实现图片轮播效果
- 做一个JS实现带渐变可停顿功能的图片轮播
- 问题：关于坛友的一个js轮播效果的实现
- 问题：关于坛友的一个js轮播效果的实现
- 分享一个用DHTML写的一个js简易轮播图
- js DOM--实现一个简易的滑动门特效
- JS-学习笔记：原生JS实现轮播图