var AutoPlay = function (id) { this.initialize(id) };
AutoPlay.prototype = {
    initialize: function (id) {
        var oThis = this;
        this.oBox = document.getElementById(id);
        this.creatPic();

        this.oUl = (this.oBox || document).getElementsByTagName("ul")[0];
        this.aImg = (this.oBox || document).getElementsByTagName("img");
        this.timer = null;
        this.autoTimer = null;
        this.iNow = 0;
        
        this.creatBtn();
        this.aBtn = (this.oCount || document).getElementsByTagName("li");
        this.toggle();
        this.autoTimer = setInterval(function () {
            oThis.next()
        }, 3000);
        this.oBox.onmouseover = function () {
            clearInterval(oThis.autoTimer)
        };
        this.oBox.onmouseout = function () {
            oThis.autoTimer = setInterval(function () {
                oThis.next()
            }, 3000)
        };
        for (var i = 0; i < this.aBtn.length; i++) {
            this.aBtn[i].index = i;
            this.aBtn[i].onmouseover = function () {
                oThis.iNow = this.index;
                oThis.toggle()
            }
        }
    },
    creatPic: function () {
        var links = "#|#|#|/userfiles/images/2021041210185111297.jpg|#".split("|");
        var pics = "/userfiles/images/hf2.jpg|/userfiles/images/hf3.jpg|/userfiles/images/2022110710223348dad.jpg|/userfiles/images/2021041210185111297.jpg|/userfiles/images/202211070936017b0f9.jpg".split("|");
        var adsIDs = "2|3|5|7|11".split("|");
        var oPicDiv = document.createElement("div");
        oPicDiv.className = "rotation_box_list_2";
        var oPics = document.createElement("ul");
        var oFrag = document.createDocumentFragment();
        for (var i = 0; i < links.length; i++) {
            var oLi = document.createElement("li");
            oLi.id = "rotation_box_li_" + adsIDs[i];
            oLi.innerHTML = '<a href="' + links[i] + '" target="_blank"><img src="' + pics[i] + '"/></a>';
            oFrag.appendChild(oLi);
        }
        oPics.appendChild(oFrag);
        oPicDiv.appendChild(oPics);
        this.oBox.appendChild(oPicDiv)
    },
    creatBtn: function () {
        this.oCount = document.createElement("ul");
        var oFrag = document.createDocumentFragment();
        this.oCount.className = "rotation_box_count_2";
        for (var i = 0; i < this.aImg.length; i++) {
            var oLi = document.createElement("li");
            oLi.innerHTML = i + 1;
            oFrag.appendChild(oLi)
        }
        this.oCount.appendChild(oFrag);
        this.oBox.appendChild(this.oCount)
    },
    toggle: function () {
        for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
        this.aBtn[this.iNow].className = "current";
        this.doMove(-(this.iNow * this.aImg[0].offsetHeight))
    },
    next: function () {
        this.iNow++;
        this.iNow == this.aBtn.length && (this.iNow = 0);
        this.toggle()
    },
    doMove: function (iTarget) {
        var oThis = this;
        clearInterval(oThis.timer);
        oThis.timer = setInterval(function () {
            var iSpeed = (iTarget - oThis.oUl.offsetTop) / parseInt("5");
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            oThis.oUl.offsetTop == iTarget ? clearInterval(oThis.timer) : (oThis.oUl.style.top = oThis.oUl.offsetTop + iSpeed + "px")
        }, 30)
    }
};


document.writeln('<style>');
document.writeln('.rotation_box_2_clearfix{zoom:1;}');
document.writeln('.rotation_box_2_clearfix:after{content:" ";display:block;clear:both;height:0}');
document.writeln('#rotation_box_2{position:relative;width:1200px;height:100px;cursor:pointer}');
document.writeln('#rotation_box_2 ul{list-style-type:none}');
document.writeln('#rotation_box_2 .rotation_box_list_2{position:relative;width:1200px;height:100px;overflow:hidden;background:#FF0000}');
document.writeln('#rotation_box_2 .rotation_box_list_2 ul{position:absolute;top:0;left:0;margin:0;padding:0;}');
document.writeln('#rotation_box_2 .rotation_box_list_2 li{width:1200px;height:100px;overflow:hidden}');
document.writeln('#rotation_box_2 .rotation_box_list_2 li img{width:1200px;height:100px;}');
document.writeln('#rotation_box_2 .rotation_box_count_2{position:absolute;right:0;bottom:15px;height:10px;}');
document.writeln('#rotation_box_2 .rotation_box_count_2 li{color:#fff;float:left;width:20px;cursor:pointer;margin-right:5px;overflow:hidden;background:#F90;opacity:0.7;filter:alpha(opacity=70);border-radius:20px;text-align:center;}');
document.writeln('#rotation_box_2 .rotation_box_count_2 li.current{color:#fff;opacity:1;filter:alpha(opacity=100);font-weight:700;background:#f60}');
document.writeln('</style>');

document.writeln('<div id="rotation_box_2" class="rotation_box_2_clearfix"></div>');

new AutoPlay("rotation_box_2");
document.close();