jQuery项目10.3

 

<script type="text/javascript">
    //轮播图
    $(function () {
        //轮播图
        var index = 0;
        var timeId;
        //获取图片滚动的高度
        var height = $(".ad").height();
        //页面加载完毕让其下标为1的li高亮显示
        $(".num li:first").addClass("on");
        //当鼠标移动到li元素上时，当前li元素高亮显示
        $(".num li").mouseover(function () {
            //获取当前鼠标放入的li元素所在的索引位置
            index = $(".num li").index($(this));
            //执行滚动方法，传index进来就是当用户滑到第几张的时候就显示第几张
            showImg(index);
        });
        //当鼠标放入图片上时，停止滚动（清除定时器），鼠标离开，开始滚动（启动定时器）
        $(".ad").hover(function () {
            //清除定时器
            clearInterval(timeId);
        }, function () {
            //启动定时器
            timeId = setInterval(function () {
                index++;
                if (index == 5) {
                    index = 0;
                }
                showImg(index);
            }, 2000);
        }).trigger("mouseout");
        function showImg(index) {
            //获取图片滚动高度
            var height = $(".ad").height();
            //根据当前索引使图片移动到对应的距离高度
            $(".slider").animate({ top: -index * height }, 1000);
            $(".num li").eq(index).addClass("on").siblings().removeClass("on");
        };
    });
    //最新动态  新闻滚动    
    $(function () {
        var $this = $(".scrollNews");
        var scrollTimer;
        $this.hover(function () {
            clearInterval(scrollTimer);
        }, function () {
            scrollTimer = setInterval(function () {
                scrollNews($this);
            }, 1000);
        }).trigger("mouseleave");
        function scrollNews(obj) {
            var $self = obj.find("ul:first");
            var lineHeight = $self.find("li:first").height(); //获取行高
            $self.animate({ "marginTop": -lineHeight + "px" }, 600, function () {
                $self.css({ marginTop: 0 }).find("li:first").appendTo($self); //appendTo能直接移动元素
            })
        };
    });
    //改变背景颜色
    $(function () {
        $("#skin li").click(function () {
            $(this).addClass("selected").siblings().removeClass("selected");
            var cssName = $(this).attr("id");
            //alert(cssName)
            $("#cssfile").attr("href", "styles/skin/" + cssName + ".css")
        })
    });
    //图片滑动
    $(function () {
        var mysw = $(".prolist").width();
        //获取子元素所在区域宽度
        var i = 0
        $(".goLeft").click(function () {
            i++
            //点击i加1
            if (i < 3) {
                $(".prolist_content").css("left", -(mysw * i));
                //子元素集合向左移动，距离为子元素的宽度乘以i。
            } else {
                i = 0;
                $(".prolist_content").css("left", -(mysw * i));
                //超出可移动范围后点击不再移动。
            }
        });
        $(".goRight").click(function () {
            i--
            //点击i减1
            if (i >= 0) {
                $(".prolist_content").css("left", -(mysw * i));
                //子元素集合向右移动，距离为子元素的宽度乘以i。
            } else {
                i = 0;
                $(".prolist_content").css("left", 0);
                //超出可移动范围后点击不再移动。最前几个子元素被显示时i为0。
            }
        });

    })
    //导航菜单收起
    $(function () {
        $(".module_up_down").toggle(function () {
            var $self = $(this);
            //prev() 方法返回被选元素的前一个同级元素。
            $self.prev().slideToggle(600, function () {
                $("img", $self).attr("src", "images/up.gif");
            });
        }, function () {
            var $self = $(this);
            $self.prev().slideToggle(600, function () {
                $("img", $self).attr("src", "images/down.gif");
            });
        });
        //下拉列表
        $(".m-treeview>li").click(function () {
            var cl = $(this).attr("class");
            if (cl == "m-collapsed")
                $(this).attr("class", "m-expanded");
            else if (cl == "m-expanded")
                $(this).attr("class", "m-collapsed");

        })
    })     
</script>