轮播图代码分享

// JavaScript Document
//轮播图函数
 function autoMoveImg(tagImg,tagBotton){
 var imgs = document.getElementsByTagName(tagImg); //获取img图片对象数组
 var buttons = document.getElementsByName(tagBotton); //获取图片显示位置按钮对象数组

//轮播图动态函数
 function InitMove(index){
		for(var i=0;i<imgs.length;i++){
			imgs[i].style.opacity='0'; //将图片的透明度置为0使其透明
			buttons[i].style.background='rgba(0,0,0,0.1)';//显示图片位置按钮样式改变
		}
		imgs[index].style.opacity='1';//将当前需要显示的图片透明度置为1使其显示出来
		buttons[index].style.background='rgba(0,0,0,1.0)';
	}

//执行页面加载完成后的首次轮播图动态函数
InitMove(0);
var count = 1;//图片对象数组中每张图片对象对应的索引值

//count调整函数
 function fMove(){
		if(count==imgs.length){ //当轮播超过了最后一张图的索引值时count置为0
			count=0;
		}
		InitMove(count); //执行轮播图动态函数
		count++; //count自加一
	}

//设置计时器函数，每2.5秒执行一次count调整函数
 var scollMove = setInterval(fMove,2500);
var btnleft = document.getElementById('btnleft'); //获取左翻按钮对象
var btnright = document.getElementById('btnright'); //获取右翻按钮对象

btnleft.onclick = function(){ //左翻按钮点击事件
		clearInterval(scollMove); //清除计时器函数
		if(count==0){ //如果图片索引为0及第一张图索引值，则将索引值置为图片对象数组长度
			count=imgs.length; 
		}
		count--; //索引值自减一变为最后一张图的索引值
		InitMove(count); //执行轮播图动态函数
                scollMove = setInterval(fMove,2500); //重新设置计时器函数
	};

 btnright.onclick = function(){//右翻按钮点击函数（与左翻同理，不再赘述）
		clearInterval(scollMove);
		fMove();
		scollMove = setInterval(fMove,2500);
	}
}

window.onload = function(){autoMoveImg('img','lun');} //在页面加载完成后执行轮播图函数

html代码段

<div class="lunbotu" >
		<img src="img/lunbotu/1.jpg"/>
		<img src="img/lunbotu/2.jpg"/>
		<img src="img/lunbotu/3.jpg"/>
		<button name="bo" style="margin-left: 40px;" id="btnleft" type="button">←</button>
		<button name="bo" style="margin-left: 400px;" id="btnright" type="button">→</button>
		<button name="lun" style="margin-left: 30px;" type="button" value="0" >1</button>
		<button name="lun" style="margin-left: 80px;" type="button" value="1" >2</button>
		<button name="lun" style="margin-left: 130px;" type="button" value="2" >3</button>
</div>

制作轮播图有还很多方法，比如改变z-index的层叠顺序，和display属性等。但是要注意的是，img，button的定位要为绝对定位并且编写顺序不能打乱。
好了，上一张效果图。

 

转载于:https://www.cnblogs.com/old-driver-lgq/p/10806291.html