jQuery轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
}
.carousel-box{
width: 670px;
height: 240px;
position: relative;
margin: 0 auto;
}
.carousel-box img{
width: 670px;
height: 240px;
position: absolute;
top: 0px;
left: 0px;
}
.carousel-box ul{
position: absolute;
left: 50%;
margin-left: -78px;
bottom: 5px;
z-index: 2;
}
.carousel-box ul li{
width: 20px;
height: 20px;
border-radius: 50%;
float: left;
margin-left: 6px;
background-color: #999;
font-size: 12px;
color: #fff;
line-height: 20px;
text-align: center;
}
.carousel-box ul li.red{
background-color: orangered;
}
.carousel-box .arrow-left{
display: block;
width: 25px;
height: 33px;
background: url(images/bg4.png) -85px -45px;
position: absolute;
left: 2px;
top: 90px;
z-index: 2;
}
.carousel-box .arrow-right{
display: block;
width: 25px;
height: 33px;
background: url(images/bg4.png) -55px -45px;
position: absolute;
right: 2px;
top: 90px;
z-index: 2;
}
.imgz{
z-index: 1;/*z-index为了提高第一张图的层级*/
}
</style>
</head>
<body>
<div class="carousel-box">
<img class="imgz" src="images/content_1.jpg" alt="">
<img src="images/content_3.jpg" alt="">
<img src="images/content_4.jpg" alt="">
<img src="images/content_5.jpg" alt="">
<img src="images/content_6.jpg" alt="">
<img src="images/content_7.jpg" alt="">
<ul>
<li class="red">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<span class="arrow-left"></span>
<span class="arrow-right"></span>
</div>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
// 自动轮播
var c = 0;
function run(){
c++;
c = (c==6)?0:c;
// 让c号图片显示，其他图片隐藏 让c号的li变色，其他的默认
$('.carousel-box img').eq(c).show().siblings('img').hide();
$('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
}
timer = setInterval(run,5000);
// 鼠标移入li的效果
$('.carousel-box ul li').mouseover(function() {
clearInterval(timer);
// 获得当前li的序号
var c = $(this).index();
// 显示c号图片，其他隐藏 让c号li变色，其他默认
$('.carousel-box img').eq(c).fadeIn(2000).siblings('img').hide();
$('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
});
// 箭头
$('.carousel-box .arrow-right').click(function() {
clearInterval(timer);
c++;
c = (c==6)?0:c;
$('.carousel-box img').eq(c).show().siblings('img').hide();
$('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
});
$('.carousel-box .arrow-left').click(function() {
clearInterval(timer);
c--;
c = (c==-1) ? 5 : c;
$('.carousel-box img').eq(c).show().siblings('img').hide();
$('.carousel-box ul li').eq(c).addClass('red').siblings('li').removeClass('red');
});
// 鼠标移出事件
$('.carousel-box ul li,.carousel-box .arrow-right,.carousel-box .arrow-left').mouseout(function(){
timer = setInterval(run,5000);
});
})
</script>
</body>
</html>
这是基本思路，可以加以整理
