<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#outer{
760px;
height: 300px;
overflow: hidden;
position: relative;
margin: 100px auto 0;
}
#outer div{
position: absolute;
left: 0;
right: 0;
760px;
height: 300px;
display: none;
}
.text{
position: absolute;
760px;
height: 300px;
left: -760px;
top: 0px;
}
.con{
position: absolute;
760px;
height: 300px;
left: -30px;
top: 0px;
display: none;
}
ul{
position: absolute;
right: 10px;
bottom: 10px;
list-style: none;
overflow: hidden;
z-index: 99;
height: 12px;
80px;
}
.active{
background: white;
}
</style>
</head>
<body>
<div id="outer">
<div style="background: url(img/bg1.jpg) no-repeat; display: block;">
<img src="img/text1.png" alt="" class="text" style="left: 0;"/>
<img src="img/con1.png" alt="" class="con" style="left: 0;display: block;"/>
</div>
<div style="background:url(img/bg2.jpg) no-repeat;">
<img src="img/text2.png" alt="" class="text"/>
<img src="img/con2.png" alt="" class="con"/>
</div>
<div style="background: url(img/bg3.jpg) no-repeat;">
<img src="img/text3.png" alt="" class="text"/>
<img src="img/con3.png" alt="" class="con"/>
</div>
<div style="background: url(img/bg4.jpg) no-repeat;">
<img src="img/text4.png" alt="" class="text" />
<img src="img/con4.png" alt="" class="con"/>
</div>
<div style="background: url(img/bg5.jpg) no-repeat;">
<img src="img/text5.png" alt="" class="text"/>
<img src="img/con5.png" alt="" class="con"/>
</div>
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="js/jquery-2.2.1.min.js"></script>
<script>
var page = 0;
var time = setInterval(function(){
page++;
if(page > 4)
{
page = 0;
}
$(".text").css({"left":"-760px"});
$(".con").css({"left":"-30px","display":"none"})
$("#outer div").fadeOut(200,function(){
$("#outer div").eq(page).fadeIn(200,function(){
$("li").removeClass("active").eq(page).addClass("active");
$(".text").eq(page).animate({"left":0},500,function(){
$(".con").eq(page).css("display","block").animate({"left":"0"})
})
})
})
},3000)
</script>
</body>
</html>