功能：JQ 左右切换+点击时索引点按钮——切换 DIV

 

 Jquery代码：

<script type="text/javascript">

$(document).ready(function(){

var cur = $(".point>li").index($(".point>li.cur"));

var total = $("div.tab").length-1;

$("#left").bind("click",function(){

cur--;

if(cur<0){

//return

cur = total;

var  lft = -total*220;

$("#inner").animate({"left":lft+"px"});

return;

}

$("#inner").animate({"left":"+=220px"});

//$(".tab").eq(cur).toggle("slow").siblings("div.tab:visible").toggle("slow");

<!-- $(".tab").eq(cur).css("display","block").siblings("div.tab").css("display","none"); -->

var $curli = $(".point>li").eq(cur)

$curli.removeClass($curli.attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));


});

$("#right").bind("click",function(){

cur++;

if(cur>total){

cur = 0;

$("#inner").animate({"left":"0px"});

return;

}

$("#inner").animate({"left":"-=220px"});

var $curli = $(".point>li").eq(cur)

$curli.removeClass($curli.attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));

});

$(".point>li").bind("click",function(){

cur = $(".point>li").index($(this));

if(cur>total){

cur = 0;

}else if(cur<0){

cur = total

}

var lft = -220*(cur);

$("#inner").animate({"left":lft+"px"});

//$(".tab").eq(cur).toggle("slow").siblings("div.tab:visible").toggle("slow");

$(this).removeClass($(this).attr("class")).addClass("cur").siblings("li").removeClass($(this).attr("class"));

})

})

</script>


HTML代码：
<body>
<p>
<img src="left.gif" style="float:left" id="left" />
    <ul class="point" >
    <li class="cur"> </li>
        <li ></li>
        <li></li>
    </ul>
    <img src="right.gif" style="float:left" id="right"/>
</p>
<div  style="clear:both"></div>

<div class="outer" >
<div id="inner">
<div class="tab" id="tab1">
a
</div>
<div class="tab" id="tab2">
b
</div>
<div class="tab" id="tab3">
c
</div>
</div>
   
</div>
</body>


CSS代码：
<style type="text/css">

.tab {
float: left;
height: 50px;
width: 200px;
border: 1px solid #dedede;
margin: 10px;
}
.point {
list-style-type: none;
margin:0;
padding:0;
float:left;
}
.point li{
width:6px;
height:6px;
background-p_w_picpath: url(no.gif);
background-repeat: no-repeat;
float:left;
margin:5px;
}
.point  .cur{
background-p_w_picpath: url(yes.gif);
background-repeat: no-repeat;
}
.outer{
width:230px; 
height:70px; 
overflow:hidden;
position:relative;
}
#inner{
width:auto;
height:70px;
position:absolute;
overflow:hidden;
}
</style>