图片轮播效果

原创 15616397727 教程 JavaScrip 321阅读 2017-12-23 11:39:57 举报

//<div id=mainId> 整体结构
// <ul id=slideId> 需要滚动的图片结构
// <li>
// <img src=""/>
// <p></p>
// </li>
// <li>
// <img src="" />
// <p></p>
// </li>
// <li>
// <img src="" />
// <p></p>
// </li>
// </ul>
// <dl id=controlId> 控制点结构
// <dd class="active"></dd>
// <dd></dd>
// <dd></dd>
// </dl>
//</div>

//调用方式
//new slidePic({
// slideId: slideId, 需要滚动的图片组id;
// controlId: controlId, 控制组id
// mainId: mainId, 整体Id
// prevId: prevId,上一页id
// nextId: nextId, 下一页Id
// width:width,
// delayTime: delayTime 图片播放间隔
//})

'use strict'

function slidePic(json) {
this.slideArea = this.$(json.slideId);//获取图片组元素Id
this.slideControl = this.$(json.controlId);//获取控制组元素Id,默认为control
this.slideMain = this.$(json.mainId) || this.slideArea;//获取整体元素Id
this.delay = json.delayTime;//延迟时间
this.oPrev = this.$(json.prevId) || null;//获取上一页Id
this.oNext = this.$(json.nextId) || null;//获取下一页Id
this.slideWidth = json.width;//获取宽度
this.init();//初始化
}

slidePic.prototype = {
init: function () {
this.setParam();//参数设置
this.setWidth();//设置宽度
this.setTimer();//图片自动播放
this.slideControl && this.controlSlide();//控制组样式变化

    this.bind();//绑定鼠标移入移出事件
},
setParam: function () {
    this.slideArea.innerHTML += this.slideArea.innerHTML;//clone图片组内元素
    this.slideLi = this.slideArea.children;//图片组单个元素
    this.liLen = this.slideLi.length;//图片组元素个数
    this.slideIndex = 0;//初始化索引        
    this.outTimer = null;//初始化定时器 

    if (this.slideControl) {
        this.controlItem = this.slideControl.children;//获取控制组单个元素
    }

},
setWidth: function () {
    //设置每个元素宽
    if (this.slideWidth) {
        for (var i = 0; i < this.liLen; i++) {
            this.slideLi[i].style.width = this.slideWidth + 'px';
        }
    }
    this.slideArea.style.width = this.slideLi.length * this.slideLi[0].offsetWidth + 'px';//设置图片组容器宽度
    this.slideArea.style.left = 0;
    this.slideArea.style.top = 0;
},
controlSlide: function () {
    var that = this;
    //点击控制按钮

    for (var i = 0; i < this.controlItem.length; i++) {
        this.controlItem[i].index = i;//索引值存入index属性
        this.controlItem[i].onclick = function () {
            that.slideIndex = this.index;
            that.slide(that.slideIndex);
        }
    }               
},
bind: function () {
    var that = this;
    //鼠标移入移出开关轮播
    this.slideMain.onmouseover = function () {
        clearInterval(that.outTimer);//关闭定时器
    }
    this.slideMain.onmouseout = function () {
        that.setTimer();//重启定时器
    }
    this.oPrev && addEvent(this.oPrev,'click',function () {
        that.prev();//点击上一页
    })
    this.oNext && addEvent(this.oNext,'click', function () {
        that.next();//点击下一页
    })
},
setTimer: function () {
    //自动滚动
    var that = this;
    this.outTimer = setTimeout(function () {
        that.next();
        that.setTimer();
    }, that.delay);
},
next: function(){
    //往下一页直到最后一页调回第一页循环

    if (this.slideIndex < this.liLen - 1) {
        this.slideIndex++; //索引值加1
    } else {
        //轮播到最后一个时索引值设为后1/2的第一个 图片组左移到前1/2的最后一个 
        this.slideIndex = this.liLen / 2;
        this.slideArea.style.left = -(this.slideIndex - 1) * this.slideLi[0].offsetWidth + 'px';
    }
    this.slide(this.slideIndex);
},
prev: function(){
    if(this.slideIndex > 0){
        this.slideIndex--;
    }else{
        this.slideIndex = this.liLen / 2 - 1;
        this.slideArea.style.left = -(this.slideIndex + 1) * this.slideLi[0].offsetWidth + 'px';
    }
    this.slide(this.slideIndex);
},
slide: function (index) {
    //水平缓冲移动到相应位置 控制组样式相应变化
    this.startMove(this.slideArea, { 'left': -index * (this.slideLi[0].offsetWidth) });
    if (this.slideControl) {
        this.controlStyle(index);
    }        
},
controlStyle: function(index) {
    //控制点样式变换
    var controlItem = this.controlItem;
    for (var i = 0; i < controlItem.length; i++) {
        controlItem[i].className = '';
    }
    controlItem[index % (this.liLen / 2)].className = 'active';
},
startMove: function (obj, json, fn) {
    clearInterval(obj.timer);
    var that = this;
    //缓冲运动
    obj.timer = setInterval(function () {
        var bStop = true;
        for (var attr in json) {
            var iCur = 0;
            if (attr == 'opacity') {
                iCur = getStyle(obj, attr) * 100;
            } else {
                iCur = parseFloat(getStyle(obj, attr));//获取当前的属性值
            }

            var iSpeed = (json[attr] - iCur) / 6;//设置速度值
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);//速度取整

            if (json[attr] !== iCur) {
                bStop = false;//是否达到目标值
            }

            if (attr == 'opacity') {//属性值变化
                obj.style.filter = 'alpha(opacity:' + iCur + iSpeed + ')';
                obj.style.opacity = (iCur + iSpeed) / 100;
            } else {
                obj.style[attr] = iCur + iSpeed + 'px';
            }

        }

        if (bStop) {//如果到达目标值 关闭定时器 回调函数
            clearInterval(obj.timer);
            if (fn) {
                fn();
            }
        }
    }, 30);

},
$: function (id) {//获取id值
    return document.getElementById(id);
}

}

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复