js图片滑动切换效果

最近遇到需要图片滑动切换的效果纠结了好久，终于弄出了一个简单的效果。

图片切换的原理一般来说可以分为两种，一种是利用position:absolute；top或left来显示需要的图片，其他图片隐藏。

另一种是通过opacity来调节透明度，让需要的图片不透明，其他图片透明。

下面来看看我的实现吧！

HTML代码：

<div class="col-md-3">
	<ul class="person-ul" id="personImg">
		<li><a href="#"><img class="img" src="../image/img1.jpg"></a></li>
		<li><a href="#"><img class="img" src="../image/img2.jpg"></a></li>
		<li><a href="#"><img class="img" src="../image/img3.jpg"></a></li>
		<li><a href="#"><img class="img" src="../image/img4.jpg"></a></li>
	</ul>
	<ul class="person-num" id="imgNum"></ul>
</div>

CSS样式：

#person .col-md-3{
	height:270px;
	overflow:hidden;
	padding:0;
}

.person-ul{
	list-style-type:none;
	margin:0;
	padding:0;
	float:left;
	position: absolute;
	top:0;
	left:0;
}
.person-ul>li{
	height:270px;
	width:100%;
	
}
#imgNum .on{
	width:20px;
	height:20px;
	line-height:20px!important;
	font-weight:bold;
	background-color: #BCC029;
}
.person-num{
	position: absolute;
	right:25px;
	height:22px;
	margin:0;
	top:225px;
}
.person-num>li{
	float: left;
	list-style: none;
	color: #fff;
	text-align: center;
	line-height: 16px;
	width: 16px;
	height: 16px;
	font-family: Arial;
	font-size: 12px;
	cursor: pointer;
	margin: 1px;
	border: 1px solid #707070;
	background-color: #995B5B;
}

JS实现：

$(function(){
	//图片切换
	var imgList = $("#personImg li"); //获取图片对象
	var liNum = imgList.length;//获取图片数
	if(liNum>0){
		for(var i=0;i<liNum;i++){//添加数字选择栏
			if(i==0){
				$("#imgNum").append('<li class="on">'+(i+1)+'</li>');
			}else{
				$("#imgNum").append("<li>"+(i+1)+"</li>");
			}
		}
	}
	//定时器
	var interval = setInterval(function(){
		var current = $("#imgNum .on");//获取当前被选中的数字对象
		var index = parseInt(current.text());//获取选中的图片的数字
		var numList =  $("#imgNum li");	//获取数字数组对象,是一个dom数组
		current.removeClass("on");//移除已选择的数字样式
		if(index<liNum){//设置新数字的选择样式
			numList[index].className="on";
			changImg(index,liNum);
		}else{
			numList[0].className="on";
			changImg(0,liNum);
		}
	},5000);
	
	//图片切换操作
	$("#imgNum li").click(function(){
		$(".on").removeClass("on");
		this.className="on";
		changImg(this.innerText-1,liNum);
		clearInterval(interval);
	});
	
});

//图片切换定位
function changImg(index,liNum){
	var maxTop = liNum*270;
	$("#personImg")[0].style.position = "absolute";
	if(index*270<=maxTop){
		$("#personImg")[0].style.top = index*(-270) + "px";
	}else{
		$("#personImg")[0].style.top = "0";
	}	
}

效果图：