爱学习当当网----图片的切换，书栏的循环滚动

怕让父母失望，怕让自己后悔。最近大火的一句话不外乎“你还年轻，怕什么来不及。”是啊，我们还年轻，怕什么来不及，可是亲爱的，我们是怕父母等不及。等不到看到我们成材的一天，等 不到为我们自豪的一天，等不到我们为他们撑起一片天的一天。小时候我们渴望长大，像大人一样可以决定自己的生活，可是后来当我们真的长大了，我们却发现长大的世界和我们想的不一样，而且随着我们长大的同时，随之 而来的是对现实的无奈。我们开始意识到，我们长大了父母也老了，我们开始恐慌害怕，怕他们看不到我们变优秀的那一天，怕自己无法为他们创造一下安心的晚年， 怕他们老了之后还在为我们担忧。

　　　如果我们现在不去努力，等以后都没有能力去带父母各地旅游散心，品尝各地美食。我们努力的意义是让他们可以衣食无忧，可以尽情享受生活的美好，而不是在 晚年还替我们的生活工作担心，还要把自己的养老钱拿出来给你。所以我们成功的速度一定要超过父母老去的速度。

短文欣赏完了，是不是该努力了呢。小编今天带来的是关于当当网的首页特效及完成重要的代码

先给大家展示下华丽的页面：

难点一和难点二是贯穿的，当鼠标在1时图片会跟着切换，当你移开图片会自动切换。

难点三循环滚动。

难点四书的分类做出正确的显示。

难点五鼠标移在上面会变颜色。

难点一难点二解析及代码：

解析：每张图片都有索引，所以在这里图片的索引会和按钮123..6绑定在一起，让两者关联。

情况一：当你的鼠标移动到按钮上时，寻找到哪个按钮，（红色代码部分）

情况二：在不移动按钮时自动切换，（橙色代码部分）

当你移动到按钮上，只要当前的图片的效果，其余的效果全部淡出（也就是取消其他的效果）

以下是关键代码：

    //轮换图片
    function changeimg() {
        //图片的索引为0
        var index = 0;
        //图片轮换为false
        var stopp = false;
        var $li = $("#content").find("#scroll_img").children("li");
        var $page = $("#content").find("#scroll_number").children("li");
        //找到当前的index并且添加样式删除其他样式
        $page.eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
        //当鼠标在$page上
        $page.mouseover(function () {
            //确定停留
            stopp = true;
            //获取当前的index
            index = $page.index($(this));
            $li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
            $(this).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
        }).mouseout(function () {
            stopp = false;
        });
        //自动切图
        setInterval(function () {
            if (stopp) return;
            index++;
            if (index >= $li.length) {
                index = 0;
            }
            $li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
30             $page.eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
        },3000);
    }

难点三解析及代码：

解析：首先假设一种情况，它是鼠标停留的。另一种情况就是自动滚动，用一个定时器让它每隔多少毫秒改变。

 function movedome(){
        var marginTop=0;//外边距
        var stop=false;//是否停留 这里为false 
        var interval=setInterval(function(){
            if(stop) return;
            $("#express").children("li").first().animate({"margin-top":marginTop--},0,function(){
                var $first=$(this);
                if(!$first.is(":animated")){
                    if((-marginTop)>$first.height()){
                        $first.css({"margin-top":0}).appendTo($("#express"));
                        marginTop=0;
                    }
                }
            });
        },50);
        $("#express").mouseover(function(){
            stop=true;
        }).mouseout(function(){
            stop=false;
        });
    }
    movedome();

难点四解析及代码：

解析：首先找到每个功能块的id，并且寻找到符合该模块的书。当寻找到符合该模块的书，其他模块的书使用hide()方法隐藏不可见。

  $("#bookTab").children(".book_new").find("[id]").mouseover(function () {
        var id = "#book_" + $(this).attr("id");
        $("#bookTab").children(".book_class").find("[id]").hide();
        $(this).addClass("book_type_out").siblings().removeClass("book_type_out");
        $(id).show();
    });

难点五解析及代码：

解析:总体来说这个功能点是比较简单的，只需要设置当鼠标移动在某一块上面时变下颜色即可，在这里不多做解释了

  $("#bookTab").children(".book_class").find("dd").mouseover(function () {
        $(this).css("border", "2px solid #F96");
    }).mouseout(function () {
        $(this).css("border", "2px solid #fff");
    });

以上就是小编本期带来的知识内容，你门看完有没有收获呢，如果有问题可以在下面提问，小编会很快做出答复哦~