<!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=gb2312" />
<title></title>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
</head>
<style>
* { padding: 0px;
margin: 0px;
}
.slider { position:relative; margin:100px auto; width:700px; height:600px; background:#666;}
ul { list-style:none;}
.slider-panel {position:absolute; }
.slider-panel img {width:700px; height:600px; border:none;}
.slider-extra { position:relative;width:700px; height:600px; }
.slider-nav { position:absolute; top:90%; left:45%; }
.slider-nav li {background: #3e3e3e; border-radius: 50%;
color: #fff;
cursor: pointer;
margin: 0 15px 0 15px;
overflow: hidden;
text-align: center;
display: inline-block;
height: 18px;
line-height: 18px;
}
.slider-nav .slider-item-selected {
background: blue;
}
</style>
<script>/* $(document).ready(function() {
//将除了第一张图片隐藏
$('.slider-panel:not(:first)').hide();
//将第一个slider-item设为激活状态
$('.slider-item:first').addClass('slider-item-selected');
//隐藏向前、向后翻按钮
//鼠标上悬时显示向前、向后翻按钮,停止滑动，鼠标离开时隐藏向前、向后翻按钮，开始滑动
$('.slider-item').hover(function() {
preIndex = $(".slider-item").filter(".slider-item-selected").index();
currentIndex = $(this).index();
$('.slider-panel').eq(preIndex).fadeOut(500)
$('.slider-panel').eq(currentIndex).fadeIn(1000); $('.slider-item').removeClass('slider-item-selected');
$('.slider-item').eq(currentIndex).addClass('slider-item-selected');
}, function() {
});
});*/
/* $(document).ready(function() {
$('.slider-panel:not(:first)').hide();
$('.slider-item:first').addClass('slider-item-selected');
$(".slider-item").hover(function(){
preIndex = $("slider-item").filter('.slider-item-selected').index();
currentIndex = $(this).index();
$('.slider-panel').eq(preIndex).fadeOut(500);
$('.slider-panel').eq(currentIndex).fadeIn(1000);
$('.slider-item').removeClass('slider-item-selected'); $('.slider-item').eq(currentIndex).addClass('slider-item-selected');
},function(){
})
}); */
$(document).ready(function() {
$('.slider-panel:not(:first)').hide();
$('.slider-item:first').addClass('slider-item-selected');
$('.slider-item').hover(function(){
cur = $(".slider-item").filter(".slider-item-selected").index();
pre = $(this).index();
$('.slider-panel').eq(pre).fadeOut(500);
$('.slider-panel').eq(cur).fadeIn(1000);
$('.slider-item').removeClass("slider-item-selected");
$('.slider-item').eq(cur).addClass("slider-item-selected");
},function(){})
});
</script>
</head><body>
<div class="slider">
<ul class="slider-main">
<li class="slider-panel">
<a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="01.jpg"></a> </li>
<li class="slider-panel">
<a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="02.jpg"></a> </li>
<li class="slider-panel">
<a href="http://www.jb51.net" target="_blank"><img alt="关注脚本之家" title="关注脚本之家" src="03.jpg"></a> </li>
</ul>
<div class="slider-extra">
<ul class="slider-nav">
<li class="slider-item">1</li>
<li class="slider-item">2</li>
<li class="slider-item">3</li>
</ul>
</div>
</div>
</body>
</html>
已经无能无力了
求大神看一看·
最上面的js代码是能产生我想要的效果，
而下面二段代码一模一样为啥效果就是出来不了啊1？
求大神 已经调很久了·······
cur = $(".slider-item").filter(".slider-item-selected").index();
pre = $(this).index();
//更改为
pre = $(".slider-item").filter(".slider-item-selected").index();
cur= $(this).index();