2.一号店首页特效

$(function(){
    //1.客户服务的显示和隐藏
    customlist();
    //2.商品列表鼠标移入显示右侧的详细列表
    leftNav();
    //3.图片轮播
    changeImg();
});
//1.客户的显示和隐藏
function customlist(){
    $(".ss_list").mouseenter(function(){
        //从上到下展开至显示
        $(".ss_list_bg").slideDown();
    }).mouseleave(function(){
        //从下至上收缩至隐藏
        $(".ss_list_bg").slideUp();
    });
}
//2.商品列表鼠标移入显示右侧的详细列表
function leftNav(){
    //鼠标移过 和鼠标移出的复合事件
    $(".leftNav ul li").hover(
        function(){
            //添加样式
            $(this).find(".fj").addClass("nuw");
            //显示对应层的详细的div
            $(this).find(".zj").show();
        },
        function(){
            //删除样式
            $(this).find(".fj").removeClass("nuw");
            //隐藏对应层的详细div
            $(this).find(".zj").hide();
        }
    );
}

//3.图片轮播
function changeImg(){
    //定义索引编号
    var index=0;
    //定义默认动画,开始
    var stop=false;
    //获取图片列表
    var $imgli=$(".slide_box").children("li");
    //获取所有的数字列表
    var $numli=$(".num").children("li");
    //数组列表鼠标移过和移出动态效果
    $numli.mouseover(function(){
        //动态效果停止
        stop=true;
        //获取当前元素的索引下标
        index=$numli.index($(this));
        //该索引的图片元素淡入
        $imgli.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
        //改变当前索引所对应的数字样式
        $(this).addClass("active").stop(true,true)
        .siblings().removeClass("active");
    }).mouseout(function(){
        //动画停止
        stop=false;
    });
    setInterval(function(){
        if(stop) return;
        index++;
        if(index>$imgli.length){
            index=0;
        }
        //该索引的图片元素淡入
        $imgli.eq(index).stop(true,true).fadeIn().siblings().fadeOut();
        //改变当前索引所对应的数字样式
        $numli.eq(index).addClass("active").stop(true,true)
        .siblings().removeClass("active");
    },3000);
}

//4.图书快讯滚动
$(function(){
    function movedown(){
        //1.定义第一个元素的上边距
        var marginTop=0;
        //2.定义动画默认是开始
        var stop=false;
        //3.定义周期函数
        var interval=setInterval(function(){
            //如果动画停止，下面操作不执行
            if(stop) return;
            //设置li标签的动画，元素上边距逐渐减少
            $("#express").children("li").first().animate(
                {
               'margin-top':marginTop--    
                },
                0,
                function(){
                    //获取第一个元素
                    var $first=$(this);
                    if(!$first.is(":animated")){30>20
                        if((-marginTop)>$first.height()){
                            $first.css({'margin-top':0}).appendTo($('#express'));
                            marginTop=0;
                        }
                    }
                }
            );
        },50);
        $("#express").mouseover(function(){
            //动画停止
            stop=true;
        }).mouseout(function(){
            //动画开始
            stop=false;
        });
    
    }
    movedown();
});