SOURCE

var i = 1;
$(function () {
    var timer = null;
    $(".ig").eq(0).fadeIn(500).siblings().fadeOut(500);
    timer = setInterval(show, 3000);
});
function show() {
    $(".ig").eq(i).fadeIn(500).siblings().fadeOut(500);
    i++;
    if (i == 5)
        i = 0;
};

<div class="header">
	<div class="logo"></div>
	<center>
		<div class="nav">
			<ul id="wrap">
				<li><a href="#">首页</a></li>
				<li><a href="#">酒馆</a></li>
				<li><a href="#">关于</a></li>
			</ul>
		</div>
	</center>
</div>
<div class="main0">
	<div class="article">
		<div class="lbt">
			<ul>
				<li class="ig"><img src="http://114.116.34.206/img/1.jpg"></li>
				<li class="ig"><img src="http://114.116.34.206/img/2.jpg"></li>
				<li class="ig"><img src="http://114.116.34.206/img/3.jpg"></li>
				<li class="ig"><img src="http://114.116.34.206/img/4.jpg"></li>
				<li class="ig"><img src="http://114.116.34.206/img/5.jpg"></li>
			</ul>
		</div>
	</div>
</div>
<div class="footer"></div>

* {
    padding: 0;
    margin: 0;
}

ul {
    list-style: none;
}

.nav li {
    list-style: none;
    display: inline-block;
}

.nav li a {
    text-decoration: none;
    position: relative;
    color: #aaa;
    font-size: 30px;
    font-weight: 700;
    font-family: sans-serif;
    display: block;
    overflow: hidden;
    transition: 0.7s all;
    padding: 10px 20px;
    text-transform: uppercase;
}

.nav li a:before {
    content: '';
    width: 60px;
    position: absolute;
    border-bottom: 8px solid;
    bottom: 0;
    right: 350px;
    transition: 0.7s all;
}

.nav li a:hover:before {
    right: 0;
}

#wrap {
    background: #333;
}

.main0 .article {
    width: 1000px;
    margin: 20px auto;
}

.main0 .article .lbt {
    margin: 0 auto;
    width: 700px;
    height: 400px;
    background: #777;
    position: relative;
}

.main0 .article .lbt img {
    width: 700px;
    height: 400px;
}

.main0 .article .lbt ul {
    position: relative;
}

.main0 .article .lbt ul li {
    position: absolute;
}