Pictures shopping site with a horizontal scroll bar showing JS code

Pictures shopping site with a horizontal scroll bar showing JS code, today http://m.wmsexdolls.com/  found a relatively good JS Photo Gallery of code, for everyone to share here on the site.

Figure showing the effect of:

function myEvent(obj, ev, fu){
    obj.attachEvent ? obj.attachEvent('on' + ev, fu) : obj.addEventListener(ev, fu, false);
}
window.onload = function(){
    var oBox = document.getElementById('ztbox');
    var oLeft = document.getElementById('left');
    var oRight = document.getElementById('right');
    var oConter = document.getElementById('conter');
    var oUl = oConter.getElementsByTagName('ul')[0];
    var oLi = oConter.getElementsByTagName('li');
    where oScroll = document.getElementById('scroll');
    var oSpan = oScroll.getElementsByTagName('span')[0];
    var i = 0;
    oUl.style.width = 1250 +'px';
    //var iWidth = oScroll.offsetWidth/(oUl.offsetWidth / oConter.offsetWidth - 1)
    var iWidth=416;
    oLeft.onmouseover = oRight.onmouseover = function(){
        this.className = 'hover';
        //点击左侧按钮
        oLeft.onclick = function(){
            var butscroll = oSpan.offsetLeft - iWidth;
            oscroll (butscroll); 
        }; 
        // click on the right 
        oRight.onclick = function () {
             var butscroll + = oSpan.offsetLeft iWidth; 

            oscroll (butscroll); 
        }; 
    }; 
    // click on the scroll bar 
    oScroll.onclick = function ( E) {
         var oEvent = || E Event;
         var butscroll = oEvent.clientX - oBox.offsetLeft - 53 is - oSpan.offsetWidth / 2 ; 
        oscroll (butscroll); 
    }; 
    oSpan.onclick = function (E) {
         var oEvent = e || event;
        oEvent.cancelBubble=true;
    }
    oLeft.onmouseout = oRight.onmouseout = function(){
        this.className = '';
    };
    //拖拽滚动条
    var iX = 0;
    oSpan.onmousedown = function(e){
        var oEvent = e || event;
        iX = oEvent.clientX - oSpan.offsetLeft;
        document.onmousemove = function(e){
            var oEvent = e || event;
            var l = oEvent.clientX - iX;
            td(l);
            return false;
        };
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        };
        return false;
    };
    //滚轮事件
    function fuScroll(e){
        var oEvent = e || event;
        var l = oSpan.offsetLeft;
        oEvent.wheelDelta ? (oEvent.wheelDelta > 0 ? l-=iWidth : l+=iWidth) : (oEvent.detail ? l+=iWidth : l-=iWidth);
        oscroll(l)
        if(oEvent.PreventDefault){
            oEvent.PreventDefault();
        }
    }
    myEvent(oConter, 'mousewheel', fuScroll);
    myEvent(oConter, 'DOMMouseScroll', fuScroll);
    //滚动事件
    function oscroll(l){
        if(l < 0){
            l = 0;
        }else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
            l = oScroll.offsetWidth - oSpan.offsetWidth;
        }
        var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
        sMove(oSpan, 'left', Math.ceil(l));
        sMove(oUl, 'left', '-'+Math.ceil((oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol));
    }

    function td(l){
        if(l < 0){
            l = 0;
        }else if(l > oScroll.offsetWidth - oSpan.offsetWidth){
            l = oScroll.offsetWidth - oSpan.offsetWidth;
        }
        var scrol = l / (oScroll.offsetWidth - oSpan.offsetWidth);
        oSpan.style.left = l+'px';
        oUl.style.left = '-'+(oUl.offsetWidth - (oConter.offsetWidth + 15)) * scrol +'px';
    }
};
//运动框架
function getStyle(obj, attr){
    return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
}
function sMove(obj, attr, iT, onEnd){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        dMove(obj, attr, iT, onEnd);
    },30);
}
function dMove(obj, attr, iT, onEnd){
    var iCur = 0;
    attr == 'opacity' ? iCur = parseInt(parseFloat(getStyle(obj, attr)*100)) : iCur = parseInt(getStyle(obj, attr));
    var iS = (iT - iCur) / 5;
    iS = iS > 0 ? Math.ceil(iS) : Math.floor(iS);
    if(iCur == iT){
        clearInterval(obj.timer);
        if(onEnd){
            onEnd();
        }
    }else{
        if(attr == 'opacity'){
            obj.style.ficter = 'alpha(opacity:'+(iCur + iS)+')';
            obj.style.opacity = (iCur + iS) / 100;
        }else{
            obj.style[attr] = iCur + iS +'px';
        }
    }
}

CSS code:

*{ margin:0; padding:0; list-style:none;}
img{ border:0;}
a{color:#BBB}
body{ background:#23375C; padding-top:150px;color:#BBB;font-size:14px;line-height:20px}

#ztbox {width:970px; height:420px; margin:0 auto;}
#ztbox #left { width:35px; height:63px; float:left; cursor:pointer;background:url(../images/banner_pre.jpg) no-repeat; margin-top:140px;}
#ztbox #right{ width:35px; height:63px; float:left; cursor:pointer;background:url(../images/banner_next.jpg) no-repeat;  margin-top:140px;}

#ztbox #conter { width:880px; height:400px; float:left; display:inline; overflow:hidden; position:relative; margin:0px 10px;}
#ztbox #conter ul { width:auto; height:357px; top:0px; left:0px; position:absolute; overflow:hidden;}
#ztbox #conter li { width:167px; height:357px; float:left;padding:0px 5px; position:relative;}
#ztbox #conter li img { width:167px; height:357px;}
#ztbox #scroll { width:880px; height:18px; left:0px; bottom:8px; cursor:pointer; position:absolute; background:url(../images/banner_bg_xi.jpg) repeat-x left center; }
#ztbox #scroll span { width:48px; height:18px; left:0px; bottom:0px; cursor:pointer; position:absolute; background:#FFEA00; }

HTML code:

<div id="ztbox">
  <div id="left"></div>
  <div id="conter">
    <ul>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b1.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b2.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b3.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b4.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b5.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b6.png" /></a></li>
      <li><a href="http://m.wmsexdolls.com/" target="_blank"><img src="images/b7.png" /></a></li>
    </ul>
    <div id="scroll"> <span></span> </div>
  </div>
  <div id="right"></div>
</div>

Reference article: http: //www.aid12580.com/