﻿/*
首页广告轮播插件
基于jQuery 1.4.1
ver 1.0.0.0b
参数 
showup:fade （渐变）rolling（滚动） 展现样式，字符串
speed:替换时间 （毫秒）
autoplayback:自动播放
hovestop:鼠标悬停是否停止自动播放
结构
<div id="slider">
<ul>
<li><a href="链接" title="显示文本"><img src="显示图片地址"/></a></li>//每个li一个播放页
</ui>
<div>
*/
(function ($) {
    $.fn.Slider = function (params) {
        var default_params = { showup: "fade", speed: 3000, autoplayback: true, hovestop: true }; //参数默认值
        if (params) { $.extend(default_params, params); } //设置参数
        var container_code = '<div class="slider-container" style="overflow:hidden;position:relative;z-index:0;"></div>';
        var navigate_code = '<div class="slider-navigate" style="position:absolute;z-index:99;"></div>';
        var loading_placeholder = "images/d.gif";//替换加载中图片
        var slider_width, slider_height;
        slider_height = $(this)[0].offsetHeight; slider_width = $(this)[0].offsetWidth;
        var items = { items: [] };
        $(this).find("ul").css("display", "none");
        $(this).find("li").each(function () {
            items.items.push({ img: $(this).find("img").attr("src"), title: $(this).find("img").attr("title"), link: $(this).find("a").attr("href") }); //获取信息
        });
        $(this).append(container_code);
        var container = $(this).find(".slider-container");
        $(container).css("width", slider_width).css("height", slider_height).css("background-color", "#E0E0E0");
        $(container).append(navigate_code);
        var navigate = $(container).find(".slider-navigate");
        $(navigate).css("top", slider_height - 30).css("width", slider_width);
        //添加项
        for (var i = 0; i < items.items.length; i++) {
            var selectCode = '<a href="' + items.items[i].link + '" target="_blank" style="position:absolute;top:0;left:0;width:' + slider_width + ';height:' + slider_height + ';display:none;"><img src="' + loading_placeholder + '" original="' + items.items[i].img + '" alt="" width="' + slider_width + '" height="' + slider_height + '" style="background:url(\'images/loading.gif\') no-repeat center;"></a>';
            var navitemCode = '<div class="slider-navitem" style="width:' + (1 / items.items.length).toFixed(3) * 100 + '%" index="' + i + '">' + items.items[i].title + '</div>';
            $(container).append(selectCode);
            $(navigate).append(navitemCode);
        }
        var linkitems = $(container).find("a");
        var navitems = $(navigate).find("div");

        $(linkitems).each(function () {//动态加载图片
            var original_img = $(this).find("img").attr("original");
            var img = $(this).find("img");
            $("<img />").bind("load", function () {
                $(img).attr("src", original_img);
            }).attr("src", original_img);
        });

        var hoved = false; //指示是否鼠标悬停
        var currshowindex = 0; //当前显示的索引
        var lastindex = 0;
        var manual = false;

        var show_at_once_func = function ShowAtOnce(links, navs, way, width) {
            var index = 0;
            var showindex = 0;
            if (!manual) {//非手动模式设置上一个层
                if (currshowindex == 0)
                    lastindex = links.length - 1;
                else
                    lastindex = currshowindex - 1;
            }
            $(navs).each(function () {
                if (currshowindex == index) {
                    $(this).attr("class", "slider-navitemactive"); //设置导航激活样式
                    showindex = index;
                }
                else {
                    $(this).attr("class", "slider-navitem"); //设置导航未激活样式
                    if (index == lastindex) {
                        $(links[index]).css("z-index", lastindex);
                    }
                    else {
                        $(links[index]).css("z-index", "-1");
                    }
                }
                index++;
            });
            switch (way) {

                case "rolling":
                    $(links[lastindex]).css("display", "inline");
                    $(links[showindex]).css("left", width / 2).css("z-index", links.length + 1).css("display", "none");
                    $(links[showindex]).animate({ left: "0%", opacity: "show" }, 380, function () { manual = false; });
                    break;
                case "fade":
                default:
                    $(links[showindex]).css("z-index", links.length + 1).css("display", "none");
                    $(links[showindex]).fadeIn(280, function () { manual = false; });
                    break;
            }
        };

        $(container).find("div [class^=slider-]").each(function () {
            $(this).bind("click", function () {//注册点击事件
                var newindex = parseInt($(this).attr("index"));
                if (newindex == currshowindex) return;
                manual = true;
                lastindex = currshowindex;
                currshowindex = newindex;
                show_at_once_func(linkitems, navitems, default_params.showup, slider_width);
            });
            $(this).bind("mouseenter", function () { hoved = true; });
            $(this).bind("mouseleave", function () { hoved = false; });
        }); //show_at_once_func function end

        show_at_once_func(linkitems, navitems, default_params.showup, slider_width); //立即显示一张图
        setInterval(function () {
            if (hoved == default_params.hovestop && default_params.autoplayback) return;
            if (currshowindex == items.items.length - 1) {
                currshowindex = 0;
            }
            else {
                currshowindex++;
            }
            show_at_once_func(linkitems, navitems, default_params.showup, slider_width);
        }, default_params.speed);
    }
})(jQuery);
