网站建设时，经常用到jquery图片轮播(图片切换)特效代码，网上很多jquery图片轮播(图片切换)特效代码，但是使用起码很不方便，以下jquery图片轮播(图片切换)特效代码代码可以改成自己想要的样式：

html代码：

        <div class="scroll_div">
            <ul class="pic">
                <li style="background:url(images/1.jpg) no-repeat center center;width:100%;height:600px;"></li>
                <li style="background:url(images/2.jpg) no-repeat center center;width:100%;height:600px;"></li>
                <li style="background:url(images/3.jpg) no-repeat center center;width:100%;height:600px;"></li>
                <li style="background:url(images/4.jpg) no-repeat center center;width:100%;height:600px;"></li>
            </ul>
            <ul class="btn" style="clear:both;">
            <li>项目一</li>
            <li>项目二</li>
            <li>项目三</li>
            <li>项目四</li>
            </ul>
            <div class="clear"></div>
            <div class="left">left</div><div class="right">right</div>
        </div>

css代码：

    .scroll_div{width:100%; height:800px; margin:0 auto; position:relative; overflow:hidden;}
    .scroll_div .pic{height:600px; position:relative;width:100%;}
    .scroll_div .pic li{position:absolute; top:0; left:0; display:none;}
    
    .scroll_div .btn{width:1024px; text-align:center;}
    .scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微软雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;}
    .scroll_div .btn li.on{background:#d73737;}
    .left{background:#d73737;width:173px;height:66px; cursor:pointer; text-align:center;}
    .right{background:#ff0000;width:173px;height:66px; cursor:pointer;text-align:center;}
    li {list-style:none;}
    .clear{clear:both;}

js代码:

$(function(){
    var listLen = $(".pic li").length, i=0,setInter,speen = 3000;
    $(".btn li:last").css({"margin":"0px 0px 0px 0px"});
    $(".btn li:first").addClass("on");
    $(".pic li:first").show();

    $(".btn li").each(function(index,element){
        $(element).click(function(){
            i = index;
            $(this).addClass("on").siblings().removeClass("on");
            $(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
        })
        
        $(element).hover(function(){clearInterval(setInter);},function(){outPlay();});
        
    })
    
    $(".left").click(function(){
        if(i >0 ){i--;}else{i=listLen-1;};
        $(".btn li").eq(i).addClass("on").siblings().removeClass("on");
        $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
    });
    
     $(".right").click(function(){
        if(i < listLen-1 ){i++;}else{i=0;};
        $(".btn li").eq(i).addClass("on").siblings().removeClass("on");
        $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
    });
    out_fun = function(){
        if(i < listLen){i++;}else{i=0;};
        $(".btn li").eq(i).addClass("on").siblings().removeClass("on");
        $(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
    }
 
    outPlay = function(){
        setInter = setInterval("out_fun()",speen);
    }
    outPlay();
})