201449

window.onload = function (){
    var oPic = document.getElementById("sPic");
    var aLi = oPic.getElementsByTagName("li");
    var oD = document.getElementById("hd2");
    var aA = oD.getElementsByTagName("a");
    var oPre = document.getElementById("pre");
    var oNext = document.getElementById("next");
    var iNow = 1;
    var iSpeed = 100;
    var timer = null;
    var timer2 = null;
    oPic.innerHTML +=oPic.innerHTML;
    var beginL = -aLi[0].offsetWidth * 2;
    oPic.style.left = 0;
    oPic.style.width = aLi[0].offsetWidth * aLi.length + "px";
    oD.style.width = 40*aLi.length + "px";
    var l =0;
    var l2;

    oNext.onclick = function(){
        toNext();
    }

    picSpace();

    //AutomaticSwitching();

    function AutomaticSwitching(){
        timer2 = setInterval(function(){
            toNext();
        },3000);
    }
    
    oPic.onmouseover = oPre.onmouseover = oNext.onmouseover = function(){
        clearInterval(timer2);
    }
    oPic.onmouseout = oPre.onmouseout = oNext.onmouseout = function(){
        //AutomaticSwitching();
    }

    function picSpace(){        
        for (var i = aLi.length - 1; i > aLi.length - 3; i--) {
            if (oPic.offsetLeft > -aLi[0].offsetWidth) {
                aLi[i].style.position = "relative";
                aLi[i].style.left = -aLi.length * aLi[0].offsetWidth + "px";
            }else{
                aLi[i].style.position = "";
                aLi[i].style.left = "";
            }
        };
        if(iNow > 2 && iNow < aLi.length / 2){
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.position = "";
                aLi[i].style.left = "";
            }
        }
    }

    function checkNum(vArg){
        var nNow = iNow;
        for (var i = 0; i < aLi.length/2; i++) {
            aA[i].className = "";
        };
        if(vArg=="pre"){
            nNow -=1;
            if(nNow > aLi.length / 2 -1){
                nNow = nNow - aLi.length/2;
            }
        }else{
            if(nNow > aLi.length / 2 -1){
                nNow = nNow - aLi.length/2;
            }
            if (iNow > aLi.length - 1){
                nNow = 0;
            };            
        }
        aA[nNow].className = "on";
    }

    function toNext(){

        checkNum();
        
        if(iNow > aLi.length -1){
            iNow = 0;            
            for(var j=0;j<aLi.length/2;j++){
                aLi[j].style.position = "";
                aLi[j].style.left = "";                
            }
            oPic.style.left = aLi[0].offsetWidth + "px";
            oPic.style.left = 0;
        }
        picSpace();
        //iSpeed = aLi[0].offsetWidth*iNow / 50;
        clearInterval(timer);       
        timer = setInterval(function(){
            iSpeed = Math.ceil((Math.abs(aLi[0].offsetWidth*iNow) - Math.abs(oPic.offsetLeft))/7);
            var f = Math.abs(aLi[0].offsetWidth*iNow) - Math.abs(oPic.offsetLeft);
            l = oPic.offsetLeft - iSpeed;  
            if(l==-aLi[0].offsetWidth * iNow){
                clearInterval(timer);
                //iSpeed = 0;
                l2 = l;
                iNow++;
                if(iNow > aLi.length-2){
                    for(var j=0;j<aLi.length/2;j++){
                        aLi[j].style.position = "relative";
                        aLi[j].style.left = aLi.length * aLi[0].offsetWidth + "px";
                    }
                }            
            }
            oPic.style.left = l + "px";
            //console.log(iSpeed);
            console.log(iNow + "oPic.offsetLeft:" + oPic.offsetLeft + " , offsetWidth:" + aLi[0].offsetWidth*iNow + " , iSpeed:" + iSpeed + " , f:" + f);
        },50);
    }

    oPre.onclick = toPre;

    function toPre(){
        iNow -=1;
        if(iNow == 0){
            iNow = aLi.length;
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.position = "";
                aLi[i].style.left = "";
            }
            for(var i=0;i<2;i++){
                aLi[i].style.position = "relative";
                aLi[i].style.left = aLi.length * aLi[0].offsetWidth + "px";
            }
            oPic.style.left = -aLi.length * aLi[0].offsetWidth + "px";
        }
        if(oPic.offsetLeft > -(aLi.length-1) * aLi[0].offsetWidth){
            for(var i=0;i<aLi.length;i++){
                aLi[i].style.position = "";
                aLi[i].style.left = "";
            }
        }
        
        clearInterval(timer);          
        timer = setInterval(function(){
            //iSpeed = 100;
            iSpeed = Math.ceil((Math.abs(oPic.offsetLeft)-aLi[0].offsetWidth * (iNow - 1)) / 7);145             var f = Math.abs(aLi[0].offsetWidth*(iNow+1)) - Math.abs(oPic.offsetLeft);*/
            checkNum("pre"); 
            l = oPic.offsetLeft + iSpeed;      
            if(l==-(iNow-1) * aLi[0].offsetWidth){
                clearInterval(timer);
                if(iNow < 2){
                    for(var j=aLi.length/2;j< aLi.length;j++){
                        aLi[j].style.position = "relative";
                        aLi[j].style.left = -aLi.length * aLi[0].offsetWidth + "px";
                    }
                    
                }               
            }
            oPic.style.left = l + "px";
            /*console.log(iNow + "oPic.offsetLeft:" + oPic.offsetLeft + " , offsetWidth:" + aLi[0].offsetWidth*iNow + " , iSpeed:" + iSpeed + " , f:" + f);*/
        },50);
    }

    for(var i=0;i<aLi.length/2;i++){
        var oA = document.createElement("a");
        oA.innerHTML = i+1;
        if(i==0){
            oA.className = "on";
        }
        oA.href = "javascript:;";
        oD.appendChild(oA);

        aA[i].index = i;

        aA[i].onmouseover = function(){
            clearInterval(timer2);
        }

        aA[i].onclick = function(){
            iSpeed = 250;
            //alert(this.index + " , " + iNow);
            if(iNow < aLi.length / 2){

                if(iNow > this.index){
                    if(iNow == this.index+1){
                        return false;
                    }
                    iNow = this.index + 2;
                    toPre();
                }else{
                    iNow = this.index;
                    checkNum();
                    toNext();
                }
            }else{
                var iNow2 = iNow - aLi.length /2;
                if(iNow2 > this.index){
                    if(iNow2 == this.index+1){
                        return false;
                    }
                    iNow = (this.index + 2) + (aLi.length /2);
                    toPre();
                }else{
                    iNow = this.index + aLi.length / 2;
                    toNext();
                } 
            }
        }
    }    
}

---

<style type="text/css">
    *{ padding:0; margin:0;}
    #slider{ 100%; position:relative; border:0px solid red; height:320px;overflow:hidden; margin:200px auto;}
    .pic{ 1000px; height:320px; position:absolute; left:50%; margin-left:-500px; border:0px solid red;overflow:-hidden;}
    .pic ul{ height:330px; border:01px solid black; position: absolute;}
    .pic ul li{ 1000px; float:left; list-style:none;}
    .pic img { 1000px; height:320px; border:none; float:left;}

    .bg{-moz-opacity: 0.5;opacity:.50;filter: alpha(opacity=50); cursor: pointer;}
    .pre{ 100%; height:320px; background:#ccc; position:absolute; left:-50%; margin-left:-500px; z-index:2; text-align: right;}
    .next{ 100%; height:320px; background:#ccc; position:absolute; left:50%; margin-left:500px; z-index:2;}
    .hd{ 100%; height:25px; border:0px solid green; position:absolute; bottom:5px; text-align:center; z-index:3;}
    #hd2{ border:0px solid #fff; height: 25px; line-height: 25px; position: absolute; left: 50%;}
    #hd2 a{ 25px; height:25px; display:block; margin:0 5px; text-align:center; color:#fff; background:#f60; border-radius: 15px; float:left; text-decoration:none;}
    #hd2 a.on{ background: #f00; color:#FFCC00;25px; height:25px;display:block; }
</style>

---

<div id="slider">
        <div class="pic">
            <ul id="sPic">
                <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2013/1031/20131031084228263.jpg" alt="1" title="1" /></a></li>
                <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0315/20140315023711196.jpg" alt="2" title="2"  /></a></li>
                <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" alt="3" title="3"  /></a></li>
                <li><a href=""><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" alt="4" title="4"  /></a></li>
                <li><a href=""><img src="http://www.hengqijy.com/uploadfile/2014/0228/20140228091207797.jpg" alt="3" title="3"  /></a></li>
                <li><a href=""><img src="http://www.hengqijy.com/statics/images/new_img/ksss.jpg" alt="4" title="4"  /></a></li>
            </ul>
        </div>
        
        <div class="hd">
            <div id="hd2"></div>
        </div>
        
        <div class="pre bg" id="pre">pre</div>
        <div class="next bg" id="next">next</div>    
    </div>

---

呼。。。