jquery 图片切换特效

css:

#d_tab29 ul, #d_tab29 li { margin: 0; padding: 0; list-style: none }
#d_tab29 img { vertical-align: top }
#d_tab29 { position: relative; height: 537px;   text-align: left;background: url(../img/big_market.jpg) no-repeat }
#d_tab29 .d_img { position: relative; margin: 0 auto; width: 860px; height: 100% }
#d_tab29 .d_img li { position: absolute; display: none; z-index: 0;border:1px solid grey;}
/*#d_tab29 .d_img .cont{ width:100%; height:87px; background:rgba(0,0,0,0.5); position:absolute; bottom:0px; left:0px; z-index:99999;}*/
#d_tab29 .d_img li img { width: 100%;display: inline-block}
#d_tab29 .d_img li.d_pos1 { display: block; width: 200px; left: 0; top: 90px; z-index: 1;}
#d_tab29 .d_img li.d_pos2 { display: block; width: 250px; left: 20%; top: 70px; z-index: 2 ;}
#d_tab29 .d_img li.d_pos3 { display: block; width: 300px; left: 40%; top: 50px; z-index: 3 ;}
#d_tab29 .d_img li.d_pos4 { display: block; width: 250px; right: 20%; top: 70px; z-index: 2 ;}
#d_tab29 .d_img li.d_pos5 { display: block; width: 200px; right: 0; top: 90px; z-index: 1 ;}
/*#d_tab29 .d_img li div{position:absolute;top:0;height:100%;width:100%;background: white;box-shadow: 1px 1px 5px #666;border:1px solid #aaa;font-size:12px;}*/
/*.pos_tp,.pos_bt{width:300px;margin:0 auto;display: block;font-size:16px;}*/
#d_tab29 .d_next,#d_tab29 .d_prev{
    display: block;
    width:40px;
    height:40px;
    top: 220px;
    z-index: 10;
    cursor: pointer ;
    background: url("../img/button.png");
}
#d_tab29 .d_next {
    position: absolute;
    right: 9%;
    background-position: -150px -399px;


}
#d_tab29 .d_prev {
    position: absolute;
    left: 9%;
    background-position: -150px -350px;


}

html:  
<div id="d_tab29">
        <ul class="d_img">
            <li class="d_pos1" style="left: 0px;"><img src="../img/w_ac.png"></li>
            <li class="d_pos2" style="left: 80px;"><img src="../img/w_ad.png"></li>
            <li class="d_pos3" style="left: 280px;"><img src="../img/w_bu.png"></li>
            <li class="d_pos4" style="left: 530px;"><img src="../img/w_da.png"></li>
            <li class="d_pos5" style="left: 680px;"><img src="../img/w_dv.png"></li>
            <li style="left: 600px;"><img src="../img/w_mo.png"></li>
            <li style="left: 600px;"><img src="../img/w_or.png"></li>
            <li style="left: 600px;"><img src="../img/w_bu.png"></li>
            <li style="left: 600px;"><img src="../img/w_da.png"></li>
            <li style="left: 600px;"><img src="../img/w_dv.png"></li>
        </ul>
        <!--<ul class="d_menu"><li class="d_select"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>-->
        <p class="d_prev"></p>
        <p class="d_next"></p>
    </div>

js:

(function(a) {
    a.fn.DB_rotateRollingBanner = function(b) {
        var c = {
            key: "",
            moveSpeed: 1500,
            autoRollingTime: 5000
        };
        a.extend(c, b);
        return this.each(function() {
            var k = a(this);
            var l = k.find(".d_img");
            var h = l.find(">li");
            var src= h.find(">img");
            var z = k.find(".d_prev");
            var B = k.find(".d_next");
            var p = h.length;
            var y = 5;
            var s = "next";
            var f;
            var C;
            var u = [];
            var x = [];
            var m = 1;
            var t = 0;
            var o = 0;
            var v = 0;
            var e = 0;
            w();
            function w() {
                d();
                g();
                n();
                change();
            }
            function d() {
                for (var E = 0; E < p; E++) {//p=h.length 10
                    var D = h.eq(E);//閬嶅巻姣忎竴涓猯i
                    if (E < y) {//y=5
                        u[E] = {
                            left: D.position().left,
                            top: D.position().top,
                            zIndex: D.css("z-index"),
                            width: D.width()
                        };
                        D.css("left", u[E].left)
                    } else {
                        D.css("left", u[y - 1].left)
                    }
                    x.push(D);
                }
                h = l.find(">li");
                //r.eq(0).addClass("d_select")
            }
            function g() {
                B.bind("click",//t涓哄搴旂殑index鍊�
                    function() {
                        if (m) {
                            s = "next";
                            m = 0;
                            if (t == p - 1) {
                                t = 0
                            } else {
                                t++
                            }
                            q()
                        }
                    });
                z.bind("click",
                    function() {
                        if (m) {
                            s = "prev";
                            m = 0;
                            if (t == 0) {
                                t = p - 1
                            } else {
                                t--
                            }
                            q()
                        }
                    })
            }
            function q() {
                if (s == "next") {
                    for (i = 0; i < y; i++) {//y=5 鏄剧ず鐨勪釜鏁�
                        var D = u[i - 1];
                        if (i == 0) {
                            x[i].fadeOut(c.moveSpeed)
                        } else {
                            x[i].css("z-index", D.zIndex).animate({
                                    left: D.left,
                                    top: D.top,
                                    width: D.width
                                }, c.moveSpeed)
                        }
                    }
                    var D = u[y - 1];
                    if (x.length != y) {
                        x[y].css({
                            left: D.left,
                            top: D.top,
                            width: D.width,
                            "z-index": D.zIndex
                        }).fadeIn(c.moveSpeed,
                            function() {
                                m = 1
                            })
                    } else {
                        x[0].stop().css({
                            left: D.left,
                            top: D.top,
                            width: D.width,
                            "z-index": D.zIndex
                        }).fadeIn(c.moveSpeed,
                            function() {
                                m = 1
                            })
                    }
                    x.push(x.shift())
                } else {
                    for (i = 0; i < y; i++) {
                        var D = u[i + 1];
                        if (i == y - 1) {
                            x[i].css("z-index", 0).fadeOut(c.moveSpeed)
                        } else {
                            x[i].css("z-index", D.zIndex).animate({
                                    left: D.left,
                                    top: D.top,
                                    width: D.width
                                },
                                c.moveSpeed)
                        }
                    }
                    var D = u[0];
                    x[x.length - 1].stop().css({
                        left: D.left,
                        top: D.top,
                        width: D.width,
                        "z-index": D.zIndex
                    }).fadeIn(c.moveSpeed,
                        function() {
                            m = 1
                        });
                    x.unshift(x.pop())
                }
                o = t;
                e++
            }
            function n() {
                f = setInterval(A, c.autoRollingTime)
            }
            function A() {
                B.click()
            }
            function change(){
                setInterval(function(){
                    for(var i=0;i<h.length;i++){
                        var img= h.eq(i)[0].children[0];
                        //alert(parseInt(getStyle2(h[i])['width']));
                        //var p1 = h.eq(i)[0].getElementsByTagName("div")[0].children[0];
                        //var p2 = h.eq(i)[0].getElementsByTagName("div")[0].children[1];
                        //p1.style.zoom = (p1.parentNode.offsetWidth/299.0);
                        //p2.style.zoom = (p1.parentNode.offsetWidth/299.0);
                        if((parseInt(getStyle2(h[i])['width']))>280){
                            if(img.src.indexOf("img/w_")>0) {
                                img.src =img.src.replace("img/w_","img/r_");
                            }
                        }
                        else {
                            if(img.src.indexOf("img/r_")>0) {
                                img.src = img.src.replace("img/r_", "img/w_");
                            }
                        }
                    }
                },200)
            }
            //function GetCurrentStyle (obj, prop) {
            //    if (obj.currentStyle) {
            //        return obj.currentStyle[prop];
            //    }
            //    else if (window.getComputedStyle) {
            //        propprop = prop.replace (/([A-Z])/g,"-$1");
            //        propprop = prop.toLowerCase ();
            //        return document.defaultView.getComputedStyle (obj,null)[prop];
            //    }
            //    return null;
            //}
            //function getDefaultStyle(obj,attribute){
            //    return obj.currentStyle?obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj,false)[attribute];
            //}
            function getStyle2(obj)
            {
                if(obj.currentStyle===undefined)
                {
                    return getComputedStyle(obj);
                }else{
                    return obj.currentStyle;//IE
                }
            }


        })
    }
})(jQuery);


$('#d_tab29').DB_rotateRollingBanner({
key:"c37080",            
moveSpeed:1500,           
autoRollingTime:5000
})