//-------------------------------------------------------------------------//
(function ($) {
    // 创建构造函数
    function slide(ele, options) {
        this.$ele = $(ele)//this. 构造函数的实例对象
        this.options = $.extend({
            speed: 0,
            delay: 4000
        }, options)//拓展
        this.states = [
            // { '&zindex': 1, width: 120, height: 150, top: 71, left: 134, $opacity: 0.5 },
            // { '&zindex': 2, width: 130, height: 170, top: 61, left: 0, $opacity: 0.6 },
            { '&zindex': 3, top: 40, left: 20, $opacity: 0.2 },
            { '&zindex': 4, top: 0, left: 20, $opacity: 1 },
            { '&zindex': 3, top: -40, left: 20, $opacity: 0.5 }
            // { '&zindex': 2, width: 130, height: 170, top: 61, left: 620, $opacity: 0.6 },
            // { '&zindex': 1, width: 120, height: 150, top: 71, left: 496, $opacity: 0.5 }
        ]
        this.lis = this.$ele.find('li')
        this.interval
        // 点击切换到下一张

        this.$ele.find('section:nth-child(2)').on('click', function () {
            this.stop()
            this.next()
            this.play()
            var one = document.getelementbyid("lione");
            var two = document.getelementbyid("litwo");
            var three = document.getelementbyid("lithree");
            var x = one.offsetheight; //高度
            var y = two.offsetheight; //高度
            var z = three.offsetheight; //高度
            if (z > x) {
                $("#lione").css("height", "4vw");
                $("#litwo,#lithree").css("height", "2vw");
            }
            if (x > y) {
                $("#litwo").css("height", "4vw");
                $("#lione,#lithree").css("height", "2vw");
            }
            if (y > z) {
                $("#lithree").css("height", "4vw");
                $("#lione,#litwo").css("height", "2vw");
            }
        }.bind(this))
        // 点击切换到上一张
        this.$ele.find('section:nth-child(1)').on('click', function () {
            this.stop();
            this.prev();
            this.play();
            var one = document.getelementbyid("lione");
            var two = document.getelementbyid("litwo");
            var three = document.getelementbyid("lithree");
            var x = one.offsetheight; //高度
            var y = two.offsetheight; //高度
            var z = three.offsetheight; //高度
            if (z > x) {
                $("#litwo").css("height", "4vw");
                $("#lione,#lithree").css("height", "2vw");
            }
            if (x > y) {
                $("#lithree").css("height", "4vw");
                $("#lione,#litwo").css("height", "2vw");
            }
            if (y > z) {
                $("#lione").css("height", "4vw");
                $("#lithree,#litwo").css("height", "2vw");
            }
        }.bind(this))
        this.move()
        // 让轮播图开始自动播放
        this.play()
    }


    slide.prototype = {


        // 原型是一个对象，所以写成一个花括号

        // move()方法让轮播图到达states指定的状态
        // <1>当页面打开时将轮播图从中心点展开
        // <2>当轮播图已经展开时，会滚动轮播图(需要翻转states数组中的数据)
        move: function () {

            this.lis.each(function (i, el) {
                $(el)
                    .css('z-index', this.states[i]['&zindex'])
                    .finish().animate(this.states[i], this.options.speed)
                    // .stop(true,true).animate(states[i], 1000)
                    .find('img').css('opacity', this.states[i].$opacity)
            }.bind(this))
        },
        // 让轮播图切换到下一张
        next: function () {
            this.states.unshift(this.states.pop())
            this.move()
             var one1 = document.getelementbyid("lione");
            var two1 = document.getelementbyid("litwo");
            var three1 = document.getelementbyid("lithree");
            var x = one1.offsetheight; //高度
            var y = two1.offsetheight; //高度
            var z = three1.offsetheight; //高度
            if (z > x) {
                $("#lione").css("height", "4vw");
                $("#litwo,#lithree").css("height", "2vw");
            }
            if (x > y) {
                $("#litwo").css("height", "4vw");
                $("#lione,#lithree").css("height", "2vw");
            }
            if (y > z) {
                $("#lithree").css("height", "4vw");
                $("#lione,#litwo").css("height", "2vw");
            }
        },
        // 让轮播图滚动到上一张
        prev: function () {
            this.states.push(this.states.shift())
            this.move()
            var one1 = document.getelementbyid("lione");
            var two1 = document.getelementbyid("litwo");
            var three1 = document.getelementbyid("lithree");
            var x = one1.offsetheight; //高度
            var y = two1.offsetheight; //高度
            var z = three1.offsetheight; //高度
            if (z > x) {
                $("#litwo").css("height", "4vw");
                $("#lione,#lithree").css("height", "2vw");
            }
            if (x > y) {
                $("#lithree").css("height", "4vw");
                $("#lione,#litwo").css("height", "2vw");
            }
            if (y > z) {
                $("#lione").css("height", "4vw");
                $("#lithree,#litwo").css("height", "2vw");
            }
        },
        play: function () {
            this.interval = setinterval(function () {//这个this指window
                // setinterval、settimeout 中的this指向window
                // states.unshift(states.pop())       //从后往前走
                // states.push(states.shift())     //从前往后走
                this.next()
            }.bind(this), this.options.delay)
        },
        // 停止自动播放
        stop: function () {
            // var _this = this
            clearinterval(this.interval)
        }
    }
    $.fn.zyslide = function (options) {
        this.each(function (i, ele) {
            new slide(ele, options)
        })
        return this
    }
})(jquery)