用JS实现简单的类似轮播图的特效(一)

JS部分：

window.onload=function (){
var Oleft =document.getElementById("left");
var Oright =document.getElementById("right");
var Onum =document.getElementById("tushu");
var Owenzi =document.getElementById("wenzi");
var Oimg1 =document.getElementById("img1");
var arrLj=["img/tm-img.jpg","img/tm-img1.jpg","img/tm-img2.jpg","img/tm-img4.jpg"]
var arrMs=["忧伤","思念","风景","孤独"];
var num=0;
function zhang(){
Onum.innerHTML=num + 1 + "/" +arrMs.length;
Oimg1.src=arrLj[num];
Owenzi.innerHTML=arrMs[num];
}
zhang();
Oleft.onclick=function(){
num --;
if(num == -1){
num = arrLj.length -1;
}
zhang();
}
Oright.onclick=function(){
num ++;
if(num == arrLj.length){
num = 0;
}
zhang();
}
}

HTML 部分：

<div id="ImgBox">
<p id="tushu">图片页数</p>
<img id="img1" src="img/tm-img.jpg"/>
<a id="left" href="javascript:;"><</a>
<a id="right" href="javascript:;">></a>
<span id="wenzi">文字描述</span>
</div>

CSS 部分：

                        *{margin: 0;padding: 0;}
			a{
				text-decoration: none;
				color: black;
			}
			#ImgBox{
				width: 600px;
				background: red;
				height: 300px;
				margin: 0 auto;
				position:relative;
				top: 100px;
			}
			#tushu{
				width: 80px;
				height:auto;
				position: absolute;
				left: 50%;
				top: 10px;
				margin-left: -40px;
				color: red;
			}
			#left,#right{
				width: 30px;
				font-size: 1.75rem;
				position: absolute;
				top:150px;
				left: 20px;
				color: red;
				/*color: rgba(0,0,0,.4);*/
			}
			#right{
				position: absolute;
				top:150px;
				left:560px;
			}
			#wenzi{
				display: block;
				width: 80px;
				height:auto;
				color: red;
				position: absolute;
				left:50%;
				bottom:0px;
				margin-left: -40px;
			}
			#img1{
				width: 100%;
			}