jquery實現相似之前凡客誠品右側圖文切換結合效果

終於公司的新聞發佈會弄好了，聽說反響不錯，70多家媒體，排場蠻大的。

如今又得從新回到開發中，新版的商城須要改版，已經實現各大版塊的，樣式結構，瀏覽器兼容已經搞定，雖然有糾結的IE6，但是依然拿下，沒有辦法，你懂的，過程很苦逼。

明天再整個圖文結合的javascript效果就能夠了，這讓jquery博客想到上個版本上用到的相似凡客誠品圖文切換效果來着。
$(function(){
    $(".recommend .info #tabnav li").each(function(index){
        $(this).hover(function(){
            $("#tabcon > li:visible").hide();
            $("#tabcon > li:eq(" + index + ")").show();
            $(this).addClass("on").siblings().removeClass("on");
        })
    })
    //goComment
    $("#goComment").click(function(){
        $("html,body").animate({scrollTop: $(".goods-comment").offset().top}, 10);
    })
    $("ul.list-shows em.ico:gt(8)").css({"text-indent":"3px","font-size":"10px","-webkit-text-size-adjust":"none"});
    //list-shows
    $(".list-shows li").hover(function(){
        $(this).addClass("on").siblings().removeClass("on");
    })
    $(".sift-goods-list ul.fix li").click(function(){
        $(this).addClass("on").siblings().removeClass("on");
    });
    var otherGoods = $(".sift-goods-con .other");
    $(".sift-goods-btn a").toggle(function(){
        otherGoods.slideUp(300);
        $(this).removeClass("up").text("更多")
    },function(){
        otherGoods.slideDown(300);
        $(this).addClass("up").text("收起")
    })
    //goods-property
    var m=$('.goods-property p img').is("img");
    if(m==true){
        $(".goods-property img").parent("p").css("padding","0")
    }
    //tag-tynn-con
    $(".tag-tynn-con dt.on").next("dd").find("ol").show();
    $(".tag-tynn-con dl dt").click(function(){
        $(this).toggleClass("on").next().find("ol").slideToggle(300)
    });
    $(".tag-tynn-con dl dt a").click(function(e){
        e.stopPropagation();
    });
    //goods-info
    $(".option-dl dt.option-dt.normal").addClass("on");
    $(".option-dl dt.option-dt:not(.normal)").click(function(){
        $(this).toggleClass("on");
        if( !$(this).next(".option-dd").is(":animated") ){
            $(this).next(".option-dd").slideToggle(300);
        }
    });
    var $cur = 1;
    var $i = 5;
    var $len = $('#img-list-con>ul.fix>li').length;
    var $pages = Math.ceil($len / $i);
    var $w = $('.goods-main #img-list-con').width();//取得展現區外圍寬度
    var $showbox = $('#img-list-con>ul.fix');
    var $pre = $('#img-list .go-left');
    var $next = $('#img-list .go-right');
    $pre.click(function(){
        if (!$showbox.is(':animated')) {
            if ($cur == 1) {
            }
            else {
                $showbox.animate({
                    left: '+=' + $w
                }, 500);
                $cur--;
            }
        }
    });
    $next.click(function(){
        if (!$showbox.is(':animated')) { //判斷展現區是否動畫
            if ($cur == $pages) {
            }
            else {
                $showbox.animate({
                    left: '-=' + $w
                }, 500);//改變left值,切換顯示版面
                $cur++; //版面數累加
            }
        }
    });
    //goods-main imgShow end
    $(".no-pinglun").click(function(){
        $("#pinglun").slideUp(300)
    });
    $(".want-ask").click(function(){
        $(".product_zixun").slideDown(300)
    })
    $(".no-zixun").click(function(){
        $(".product_zixun").slideUp(300)
    });
    $(".pay-append dd ").hide();
    $("table.data .a-share").click(function(){
        $(this).parents("tr").find(".bubble").toggle();
        $(this).parents("tr").siblings("tr").find(".bubble").hide();
        $("body").one('click', function() {
            $(".bubble").hide();
        });
        return false;
    });
    $(".bubble").click(function(){
        stopPropagation()
    });
    $(".comment-main .info .product_zonghe a.no-re").click(function(){
        $(this).parents(".product_zonghe").slideUp();
    });
    /* x-15 */
    function SaveClass()
    {
        var temClassArry = new Array()
        $("#UserStart > li").each(function(i){
        temClassArry[i] = $(this).attr("class");
    })
    return temClassArry;
    }
    $(document).ready(function(){
        var temparray = SaveClass();   
        $("#UserStart > li").mousemove(
            function(){
                var currentCount=0;
                currentCount = $("#UserStart > li").index($(this)[0])
            $("#UserStart > li").each(function(i){if(i<=currentCount)
        {
        $(this).removeClass();
        $(this).addClass("lv1");
            }
        else{
            $(this).removeClass();
            $(this).addClass("lv2");
        }})
    })
 
    .click(function(){
        temparray = SaveClass();
    })
 
    .mouseout(function(){
        $("#UserStart > li").each(function(i){
            $(this).removeClass();
            $(this).addClass(temparray[i]);
            })
        })
    });
});
function SelectPay(value)
{
    if(value==4)
    {
        $(".pay-way").slideDown(300);
    }
    else
    {
        $(".pay-way").slideUp(300); 
    }
}
function SelectOpenClosed(obj)
{
    var objName=$("#"+obj);
    if(obj=="one")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
    if(obj=="two")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
     if(obj=="three")
    {
        var openclass=objName.attr("class");
        if(openclass.indexOf("on")>-1)
        {
            objName.css("background-position","8px -1122px");
            objName.next("dd").slideUp(300);
            objName.removeClass("on");
        }
        else
        {
            objName.css("background-position","8px -1103px");
            objName.next("dd").slideDown(300);   
            objName.addClass("on");
        }
    }
}

代碼有點長 先放點js實現代碼，還有的看下面吧。

在線效果DEMO

轉自 jquery效果 http://www.jqueryba.com/355.html