js实现轮播图（手动+自动）

目录

设置大体样式

图片播放

完整代码

---

设置大体样式

将图片设置为相对定位，按钮设置为绝对定位，这样就可以将按钮镶嵌在图片中

图片播放

var imgArr = ["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];				
				var index =0 ;		
				
				function pre(){
					var img = document.getElementById("imgid");	
					if(index == 0){
						index = 5;
					}
					index-=1;
					img.src = imgArr[index];
				}
				function next(){
					var img = document.getElementById("imgid");	
					if(index == 4){
						index = -1;
					}
					index+=1;
					img.src = imgArr[index];
}

 添加dom对象，将图片存入数组中，用下标来访问图片内容

var t;
function start(){
	t = setInterval(next,1000)
}
function stop(){
	clearInterval(t);
}

设置自动播放的事件， 并添加onmouseover和onmouseout事件，当鼠标放在图片或者按钮上，停止自动播放，离开后开始自动播放，

function oper(oper){
					document.getElementById("pre").style.opacity=oper;
					document.getElementById("next").style.opacity=oper;
}

设置透明度，当鼠标移入图片时，显示按钮，当鼠标离开图片时，按钮消失 

完整代码