ClassContent/历届学生/陈一航/项目/04-07/swiper.js

(function (win) {

    var timer;
    var defaultSetting = {
        time: 3,
        containerClassName: '.container',
        NavigationClassName: '.navigation',
        next: '.next',
        previous: '.prev',
        autoPlay: false,
        data: [],
        imgWidth: 0,
        OuterClassName: '.man'
    }

    // es5  构造函数
    // 主要做 变量的保存和校验
    function LunBo(setting) {

        defaultSetting.OuterClassName = setting.OuterClassName || defaultSetting.OuterClassName
        defaultSetting.time = setting.time || defaultSetting.time
        defaultSetting.containerClassName = setting.containerClassName || defaultSetting.containerClassName
        defaultSetting.NavigationClassName = setting.NavigationClassName || defaultSetting.NavigationClassName
        defaultSetting.next = setting.next || defaultSetting.next
        defaultSetting.previous = setting.previous || defaultSetting.previous
        defaultSetting.autoPlay = setting.autoPlay || defaultSetting.autoPlay
        defaultSetting.data = setting.data || defaultSetting.data

        if ( defaultSetting.data.length == 0 || (document.querySelector(defaultSetting.containerClassName) == null ||
        document.querySelector(defaultSetting.NavigationClassName) == null||
        document.querySelector(defaultSetting.next) == null||
        document.querySelector(defaultSetting.previous) == null||
        document.querySelector(defaultSetting.OuterClassName) == null )) {
                console.error("类名不存在或data数据源为空，请仔细检查")
            } else {
               this.init() 
            }
    }

    LunBo.prototype = {
        init() {
            this.RenderContainer()
            this.RenderNavigation()
            this.BindPreviousClick()
            this.BindNextClick()

            defaultSetting.autoPlay ? this.AutoPlay() : '' 
            defaultSetting.autoPlay ? this.Seout() : '' 
            this.Seover()
            

            setTimeout(() => defaultSetting.imgWidth = document.querySelector("img").width, 300)
            
        },
        AutoPlay() { 
                timer = setInterval( () => {
                    this.OffSetDistance(-defaultSetting.imgWidth)
                    this.changeActiveYd()
                }, (defaultSetting.time)*1000 )
            
        },
        Seover(){
            this.$(defaultSetting.OuterClassName).onmouseover =  () => {
                clearInterval(timer)
            }
        },
        Seout(){
            this.$(defaultSetting.OuterClassName).onmouseout =  () => {
                this.AutoPlay()
            }
        },

        // 渲染 轮播图的数据到页面
        RenderContainer() {
            defaultSetting.data.forEach((val,index) => {
                this.$(defaultSetting.containerClassName).innerHTML += 
                `
                 <li>
                    <a target="_blank" href="${val.href}">
                      <img src="${val.imgUrl}" alt="">
                    </a>
                 </li>
                `
            });

        },

        // 渲染小圆点
        RenderNavigation() {
            defaultSetting.data.forEach((val,index) => {
                this.$(defaultSetting.NavigationClassName).innerHTML +=
                `
                    <li class="${index == 0 ? 'active' : ''}"></li>
                `
            });
            this.BindYdClick()
        },


        changeActiveYd() {
            var index = Math.abs(parseInt(this.$(defaultSetting.containerClassName).style.left)) / defaultSetting.imgWidth;
            var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
            LiArr.forEach(function(val){
                val.className = ""
            })
            LiArr[index].className = "active"
        },

        // 小圆点绑定事件
        BindYdClick() {
            var LiArr = document.querySelectorAll(`${defaultSetting.NavigationClassName} li`);
            LiArr.forEach((val,index) => {
                val.onclick = () => {
                    LiArr.forEach(function(v){
                        v.className = ""
                    })
                    val.className = "active"
                    this.$(defaultSetting.containerClassName).style.left = `${index * -defaultSetting.imgWidth}px`;
                }
            })
        },


        // 右侧下一页数
        BindPreviousClick() {
            this.$(defaultSetting.previous).onclick = () => {
                this.OffSetDistance(-defaultSetting.imgWidth)
                this.changeActiveYd()
            }
        },

        // 左侧上一页
        BindNextClick() {
            this.$(defaultSetting.next).onclick = () => {
                this.OffSetDistance(defaultSetting.imgWidth)
                this.changeActiveYd()
            }
        },


        OffSetDistance(nums) {
            
            var Offset = parseInt(this.$(defaultSetting.containerClassName).style.left) + nums;
            // console.log("Offset: ", Offset)
            var maxWidth = defaultSetting.imgWidth * (defaultSetting.data.length - 1);

            // console.log("maxWidth: ", maxWidth)

            this.$(defaultSetting.containerClassName).style.left = `${Offset}px`
            
            if (Offset <  -maxWidth ) {
                this.$(defaultSetting.containerClassName).style.left = "0px";
            }
        
            if (Offset > 0) {
                this.$(defaultSetting.containerClassName).style.left = `-${maxWidth}px`;
            }
        },

        $(calssName) {
            return document.querySelector(calssName)
        }
    }

    win.Swiper = LunBo

})(window)