基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果；
但我在使用fadeIn淡入时却无效果，最后只能使用fadeTo实现，求大神指教
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个轮播</title>
<style>
#scrollPlay{
width: 730px;
height: 336px;
/*overflow: hidden;*/
}
#pre{
position: absolute;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
img{
opacity: 0;
position: absolute;
}
#next{
position: absolute;
margin-left:700px;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
span{
display: block;
width: 15px;
height: 15px;
float: left;
border: 1px solid #fff; }
#buttons{ position: absolute;
background: #000;
margin-top: 300px;
margin-left: 300px;
z-index: 10; } .onactive{
background: green;
}
</style>
<script src='jquery.js'></script>
<script src='index.js'></script>
</head>
<body>
<div id='scrollPlay'>
<div id='buttons'>
<span index = 0 class='onactive'></span>
<span index = 1></span>
<span index = 2></span>
<span index = 3></span>
<span index = 4></span> </div>
<div id='pre'><</div>
<div id='next'>></div>
<img src='images/1.jpg' alt='pics' style='opacity:1'>
<img src='images/2.jpg' alt='pics'>
<img src='images/3.jpg' alt='pics'>
<img src='images/4.jpg' alt='pics'>
<img src='images/5.jpg' alt='pics'>
</div>
</body> </html>
JS：
$(function(){
var index = 0;
var flag = false; //用于判断是否处于动画状态
//切换函数
function move(offset){
flag=true;
//console.log(offset)
$('img').eq(index).fadeOut('slow',function(){
if(offset>0){
if(index ==4){
index=0;
}else{
//console.log(index);
index=index+offset;
//console.log(index);
}
}
if(offset<){
if(index==0){
index=4;
}else{
index=index+offset
}
}
$('img').eq(index).fadeTo('slow',1) //使用fadeIn不成功:$('img').eq(index).fadeIn('slow')
showButton();
flag=false;
});
}
//点击切换上一张
$('#pre').click(function(){
if(flag==false){
move(-1)
}
})
//点击切换下一张
$('#next').click(function(){
if(flag==false){
move(1)
}
})
//点击按钮直接切换
$('span').click(function(){
if(flag==false){
var i= $(this).attr('index')
//console.log(i)
//console.log(index)
//console.log(i-index)
move(i-index)
showButton();
}
})
//高亮显示按钮
function showButton(){
if($('span').hasClass('onactive')){
$('span').removeClass();
}
$('span').eq(index).addClass('onactive')
}
//自动播放
var timer;
function go(){
timer = setInterval(function(){
$('#next').trigger('click');
},3000)
}
//鼠标悬停，清除自动播放
$('#scrollPlay').mouseover(function(){
clearInterval(timer)
})
//鼠标移开，开始自动播放
$('#scrollPlay').mouseout(function(){
go();
})
go();
})