关于jquery的淡入淡出轮播图

这里给大家介绍一款jquery的淡入淡出轮播图，总体来说都比较简单。如下所示：
1.html页面部分
<div class="wx1200 shall_success">
<ul class="success_con">
<li>
<div class="content">
<div class="over_img">
<img src="images/dafu_zero.png" />
</div>
<p>电商类APP</p>
<p class="color_797979">大福空间</p>
</div>
<div class="content">
<div class="over_img">
<img src="images/Jinruilong.png" />
</div>
<p>金融类APP</p>
<p class="color_797979">金瑞龙</p>
</div>
<div class="content">
<div class="over_img">
<img src="images/magnate.png" />
</div>
<p>社交类APP</p>
<p class="color_797979">大资本家</p>
</div>
</li>
<li>
<div class="content">
<div class="over_img">
<img src="images/Jinruilong.png" />
</div>
<p>电商类APP</p>
<p class="color_797979">大福空间</p>
</div>
<div class="content">
<div class="over_img">
<img src="images/magnate.png" />
</div>
<p>电商类APP</p>
<p class="color_797979">大福空间</p>
</div>
<div class="content">
<div class="over_img">
<img src="images/dafu_zero.png" />
</div>
<p>电商类APP</p>
<p class="color_797979">大福空间</p>
</div>
</li>

</ul>
<ul class="infoList text-center">
<!-- 图片左下角文字信息部分 -->
<li class="infoOn"></li>
<li></li>
</ul>

</div>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)
})

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