jQuery图片自动切换（带左右切换按钮）

css:
.con_left span.pic_left { z-index: 4; cursor:pointer; position: absolute; top: 190px; left: 20px; background: url("../images/icons.png") no-repeat -90px -60px; display: block; width: 50px; height: 50px;}
.con_left span.pic_right{  z-index: 4; cursor:pointer; position: absolute; top: 190px; right: 20px; background: url("../images/icons.png") no-repeat -90px -10px; display: block; width: 50px; height: 50px;}
.con_left .pic_list{  width: 495px; height: 350px; margin-top:20px;}
.con_left .pic_list .pic{  position: absolute; opacity: 0; background: #f9f9f9; width: 100%; height: 100%; text-align: center;}
.con_left .pic_list .pic.current{ z-index:3;}
.con_left .pic_list .pic.prev{ z-index:2;}
.con_left .pic_list .pic img{ width: 250px; height: 240px; padding-top:20px; *padding-top:40px; }

.con_left .pic_list .pic p{ background: #f9f9f9; font-family: "方正兰亭黑_GBK"; opacity: 0.99; font-size: 18px; color: #4c4c4c; padding-top: 50px;}

html:
< div class="con_left" >
       < div class="top_txt">
            < span class="pic_left">< /span >
            < div class="pic_list" >
                < div class="pic current" >
                    < img src="images/pic01.png" alt=""/>
                    < p >图片1< /p >
                < /div >
                < div class="pic" >
                    < img src="images/pic02.png" alt=""/>
                    < p >图片2< /p >
                < /div >
                < div class="pic" >
                    < img src="images/pic03.png" alt=""/>
                    < p >图片3< /p >
                < /div >
                < div class="pic" >
                    < img src="images/pic04.png" alt=""/>
                    < p >图片4< /p >
                < /div >
      < /div >
      < span class="pic_right" >< /span >
< /div >

js：   
$(  document  ).ready( function(   ){
    $(".pic_left" ).click(  function(  ){
        var $current = $(".pic_list .pic.current");
        // 判断div.current个数为0的时候 $current的取值
        if ( $current.length == 0 ) $current = $(".pic_list .pic:first");
        // 判断div.current存在时则匹配$current.next(),否则转到第一个div
        var $prev =  $current.prev().length ? $current.prev() : $(".pic_list .pic:last");
        $current.addClass('prev');
        $prev.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 0, function() {
            //因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
            $current.removeClass("current prev");
        });
    });
    $(".pic_right").click(function(){
        var $current = $(".pic_list .pic.current");
        // 判断div.current个数为0的时候 $current的取值
        if ( $current.length == 0 ) $current = $(".pic_list .pic:last");
        // 判断div.current存在时则匹配$current.next(),否则转到第一个div
        var $next =  $current.next().length ? $current.next() : $(".pic_list .pic:first");
        $current.addClass('prev');
        $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 0, function() {
            //因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
            $current.removeClass("current prev");
        });
    });
});
$(  function(  ) {
//        $(".pic_list .pic p").css("opacity","0.7");
     $(".current").css("opacity","1.0");
     // 设定时间为3秒(1000=1秒)
     setInterval( "slideSwitch()", 6000);
});
function  slideSwitch(  ) {
    var $current = $(".pic_list .pic.current");
    // 判断div.current个数为0的时候 $current的取值
    if ( $current.length == 0 ) $current = $(".pic_list .pic:last");
    // 判断div.current存在时则匹配$current.next(),否则转到第一个div
    var $next =  $current.next().length ? $current.next() : $(".pic_list .pic:first");
    $current.addClass('prev');
    $next.css({opacity: 0.0}).addClass("current").animate({opacity: 1.0}, 10, function() {
        //因为原理是层叠,删除类,让z-index的值只放在轮转到的div.current,从而最前端显示
        $current.removeClass("current prev");
    });
}