关于jquery的淡入淡出轮播图

这里给大家介绍一款jquery的淡入淡出轮播图，总体来说都比较简单。如下所示：

1.html页面部分

						

							

								

									

										
									
									
电商类APP
									
大福空间
								
								

									

										
									
									
金融类APP
									
金瑞龙
								
								

									

										
									
									
社交类APP
									
大资本家
								
							
							

								

									

										
									
									
电商类APP
									
大福空间
								
								

									

										
									
									
电商类APP
									
大福空间
								
								

									

										
									
									
电商类APP
									
大福空间
								
							

						
						

							
							

							

						

					

2.css部分

.shall_success{position: relative;}
.success_con{height: 400px;overflow: hidden;}
.success_con li{position: absolute;top:0px;left:0px;cursor: pointer;}
.success_con li img{transition: all 0.6s;}
.success_con li img:hover{transform: scale(1.2);  } 
.success_con li div p{padding-left: 15px;line-height: 30px;}
.success_con li div p:first-of-type{font-size: 20px;color:#1f1f1f;}
.success_con li div:first-of-type{margin-left: 0;}
.success_con li div:last-of-type{margin-right: 0;}
.infoList{width: 120px;margin: 0 auto;overflow: hidden;}
.infoList li{float: left;width: 40px;height: 8px;border-radius: 2px;background: #cecece;margin:0 10px;}
.infoList .infoOn{background: #EF102F;}

3.jquery部分

$(function() {
	//	轮播图
	//代码初始化
	var size = $(".success_con li").size();

	//手动控制轮播效果
	$(".success_con li").eq(0).show();
	$(".infoList li").eq(0).addClass("infoOn");
	$(".infoList li").mouseover(function() {
		$(this).addClass("infoOn").siblings().removeClass("infoOn");
		var index = $(this).index();
		i = index;
		$(".success_con li").eq(index).fadeIn(300).siblings().fadeOut(300);
	})

	//自动
	var i = 0;
	var t = setInterval(move, 1500);

	//核心向右的函数
	function move() {
		i++;
		if(i == size) {
			i = 0;
		}
		$(".infoList li").eq(i).addClass("infoOn").siblings().removeClass("infoOn");
		$(".success_con li").eq(i).fadeIn(500).siblings().fadeOut(500);

	}
	//定时器的开始与结束
	$(".shall_success .success_con li").hover(function() {
		clearInterval(t);
	}, function() {
		t = setInterval(move, 3000)
	})

})

这里没有左右点击按钮，但是实现起来也是很简单的，需要左右按钮的朋友们，也可以自己写一个。