轮播图的源码

前端部分源码：

  <div id="dpic" class="dpic">
     <div class="picone">
       <img class="picimg" src="{{bkinfo.bk_coverpic}}" >
     </div>
       <span class="spanleft">&lt;</span>
       <span class="spanright on">&gt;</span>
       <div class="picenter">
        <ul>
          <li><img src="{{bkinfo.bk_coverpic}}" id="firstpic"></li>
           {% for img in bkpics %}
          <li><img src="{{img.bk_pic}}"></li>
           {% endfor %} 
        </ul>
       </div>
  </div>

 

对应的js部分：

//详情页面图片轮播的js

;(function() {

    var EventUtil, Get, Element;
    EventUtil = {
        addHandler: function(ele, type, handler) {
            if (ele.addEventListener) {
                ele.addEventListener(type, handler, false)
            } else if (ele.attachEvent) {
                ele.attachEvent("on" + type, handler)
            } else {
                ele["on" + type] = handler;
            }
        },
        removeHandler: function(element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },
        getEvent: function(event) {
            return event ? event : window.event;
        },
        getTarget: function(event) {
            return event.target || event.srcElement;
        },
        preventDefault: function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function(event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubble = true;
            }
        }
    };

    Get = {
        byId: function(id) {
            return typeof id === "string" ? document.getElementById(id) : id
        },
        byClass: function(sClass, oParent) {
            var aClass = [];
            var reClass = new RegExp("(^| )" + sClass + "( |$)");
            var aElem = this.byTagName("*", oParent);
            for (var i = 0; i < aElem.length; i++) reClass.test(aElem[i].className) && aClass.push(aElem[i]);
            return aClass
        },
        byTagName: function(elem, obj) {
            return (obj || document).getElementsByTagName(elem)
        }
    };

    Element = {
        hasClass: function(obj, name) {
            return (' ' + obj.className + ' ').indexOf(' ' + name + ' ') > -1 ? true : false;
        },
        addClass: function(obj, name) {
            if (this.hasClass(obj, name)) return;
            obj.className += ' ' + name;
        },
        removeClass: function(obj, name) {
            obj.className = obj.className.replace(new RegExp('(^|\\s)' + name + '(?:\\s|$)'), '$1').replace(/\s{1,}/g, ' ');
        }
    }

    function MagnifierF() {
        this.init.apply(this, arguments);
    }

    MagnifierF.prototype = {
        init: function(id) {
            var _is = this;
            this.magWrap = Get.byId(id);
            this.magMain = this.magWrap.children[0];
            this.mW = this.magMain.offsetWidth;
            this.mH = this.magMain.offsetHeight;
            this.magImg = this.magMain.getElementsByTagName('img')[0];
            this.mImgSrc = this.magImg.getAttribute('src');

            this.specBox = Get.byClass("picenter", this.magWrap)[0];
            this.specUl = this.specBox.getElementsByTagName('ul')[0];
            this.specItem = this.specBox.getElementsByTagName('li');

            _is.specFn();

        },
        specFn: function() {
            var _is = this,
                _oSpImg, _oISrc,
                oLBtn = Get.byClass("spanleft", _is.magWrap)[0],
                oRBtn = Get.byClass("spanright", _is.magWrap)[0],
                oLiW = this.specUl.getElementsByTagName('li')[0].offsetWidth + 5,
                _len = _is.specItem.length,
                n = 0,
                l = null,
                r = null;

            function TabFn(event) {
                var target = EventUtil.getTarget(event),
                    i = 0;

                if (target.nodeName != "UL") {

                    if (target.nodeName == "IMG") {
                        target = target.parentNode;
                    }
                    for (; i < _len; i++) {
                        _is.specItem[i].className = '';
                    }
                    target.className = 'on';

                    _oSpImg = target.getElementsByTagName('img')[0];
                    _oISrc = _oSpImg.getAttribute('src');

                    _is.magImg.setAttribute('src', _oISrc);
                    _is.mImgSrc = _oISrc;
                }

            }
            EventUtil.addHandler(_is.specUl, "mouseover", TabFn);

            function moveFn(event) {
                var target = EventUtil.getTarget(event);

                if (target.className.indexOf("spanright") > -1) {
                    r = ++n;
                    if (r > _len - 5)
                        Element.removeClass(target, "on");

                    if (r > _len - 4) {

                        n = _len - 4;
                        return false;
                    } else {

                        _is.buttur(_is.specUl, {
                            left: -(r * oLiW)
                        });
                        Element.addClass(oLBtn, "on");
                    }
                }
                if (target.className.indexOf("spanleft") > -1) {
                    l = --n;
                    if (l < 1)
                        Element.removeClass(target, "on");

                    if (l < 0) {

                        n = 0;
                        return false;
                    } else {

                        _is.buttur(_is.specUl, {
                            left: -(l * oLiW)
                        });
                        Element.addClass(oRBtn, "on");
                    }
                }
            }

            if (_len > 4) {

                Element.addClass(oRBtn, "on");
                EventUtil.addHandler(_is.magWrap, "click", moveFn);
            }

        },
        buttur: function(ele, obj) {

            window.clearTimeout(ele.timer);

            var _this = this,
                end = null;

            for (direc in obj) {

                var direc1 = direc.toLowerCase(),
                    strOffset = "offset" + direc1.substr(0, 1).toUpperCase() + direc1.substring(1).toLowerCase(),
                    target = obj[direc],
                    nSpeed = (target - ele[strOffset]) / 8;

                nSpeed = nSpeed >= 0 ? Math.ceil(nSpeed) : Math.floor(nSpeed);
                ele.style[direc1] = ele[strOffset] + nSpeed + "px";
                end += nSpeed;

            }

            if (end)

                if (typeof fnCallback == "function") {
                fnCallback.call(ele);
            } else {

                ele.timer = window.setTimeout(function() {
                    _this.buttur(ele, obj)
                }, 20);

            }
        }

    }

    window['MagnifierF'] = function(id) {
        return new MagnifierF(id);
    }

})();

$(function(){
    MagnifierF("dpic");
})