<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title> <style type="text/css"> *{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
} #main {
width: 760px;
height: 300px;
position: relative;
margin: 50px auto;
overflow: hidden;
} #main .pic {
width: 760px;
height: 300px; overflow: hidden;
}
#main .pic ul li {
width: 760px;
height: 300px;
position: relative; }
#main .pic ul li .img1 {
position: absolute;
top: 0;
left: -760px;
}
#main .pic ul li .img2 {
position: absolute;
top: 0;
left: -20px;
display: none;
}
#main .nav {
position: absolute;
right: 20px;
bottom: 20px;
}
#main .nav ul li {
width: 10px;
height: 10px;
border: 1px solid #fff;
float: left;
margin-left: 5px;
}
#main .nav ul li.select{
background: #fff;
}
#main span{
display: block;
position: absolute;
height: 50px;
width: 30px;
color: #fff;
background: #000;
opacity: 0.3;
font-size: 24px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.left{
left: -30px;
top: 50%;
margin-top: -25px;
}
.right{
right: -30px;
top: 50%;
margin-top: -25px;
}
</style> </head>
<body> <div id="main">
<div class="pic">
<ul>
<li style="background: url(img/bg1.jpg);">
<img class="img1" src="img/text1.png"/>
<img class="img2" src="img/con1.png"/>
</li>
<li style="background: url(img/bg2.jpg);">
<img class="img1" src="img/text2.png"/>
<img class="img2" src="img/con2.png"/>
</li>
<li style="background: url(img/bg3.jpg);">
<img class="img1" src="img/text3.png"/>
<img class="img2" src="img/con3.png"/>
</li>
<li style="background: url(img/bg4.jpg);">
<img class="img1" src="img/text4.png"/>
<img class="img2" src="img/con4.png"/>
</li>
<li style="background: url(img/bg5.jpg);">
<img class="img1" src="img/text5.png"/>
<img class="img2" src="img/con5.png"/>
</li> </ul>
</div>
<div class="nav">
<ul>
<li class="select"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<span class="left">〈</span>
<span class="right">〉</span> </div>
<div style="width: 100px; height: 100px; background: red; display: none;"></div>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script>
$(function(){
//初始第一张显示
$(".pic li").eq(0).find(".img1").stop().animate({"left":"0"},1000)
.next().show().stop().animate({"left":"0"},1000);
var count = 0;
//定义动画
var move = function(){
count++;
if(count==$(".pic li").length){
count = 0;
}
donghua();
}
var donghua = function(){
$(".pic li").eq(count).fadeIn().find(".img1").stop()
.animate({"left":0},1000).next().show().stop()
.animate({"left":0},1000).parent().siblings().fadeOut()
.find(".img1").stop().css({"left":"-760px"}).next()
.hide().stop().css({"left":"-20px"}); $(".nav li").eq(count).addClass("select").siblings()
.removeClass("select");
}
//定时器自动轮播
var timer = setInterval(function(){
move();
},2000)
//点击相应的角标
$(".nav li").click(function(){
var index = $(this).index();
count = index;
$(this).addClass("select").siblings().removeClass("select");
$(".pic li").eq(index).fadeIn().find(".img1").stop()
.animate({"left":0},1000).next().show().stop()
.animate({"left":0},1000).parent().siblings().fadeOut()
.find(".img1").stop().css({"left":"-760px"}).next()
.hide().stop().css({"left":"-20px"});
})
//鼠标移入，清除定时器，左右按钮显示，移除开启定时器，左右按钮隐藏
$("#main").hover(
function(){
clearInterval(timer);
$(".left").stop().animate({"left":0},500);
$(".right").stop().animate({"right":0},500);
},
function(){
timer = setInterval(function(){
move();
},2000)
$(".left").stop().animate({"left":"-30px"},500);
$(".right").stop().animate({"right":"-30px"},500);
}
)
//点击右侧按钮
$(".right").click(function(){
count++;
if(count == $(".pic li").length){
count = 0;
}
donghua();
})
//点击左侧按钮
$(".left").click(function(){
count--;
if(count<0){
count = $(".pic li").length;
}
donghua();
})
})
</script> </body>
</html>
一个背景图，两个动画图片，写的不好，但是效果能实现；本人认为写效果一定先要布局好，不然的话效果实现起来可能会复杂；如果布局一目了然，效果实现起来思路就会清晰很多。
附上使用的一组图片
bj1.jpg;
con1.png;
text1.png
