利用运动框架实现左右焦点图

 

 

 

 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>焦点图</title>
<style type="text/css">
body,ul,ol,li,img { margin:0; padding:0; }
img { border:none; vertical-align:middle; }
ul,ol { list-style:none; }
#slide { width:470px; height:150px; margin:20px auto; position:relative; overflow:hidden; font-size:12px; border:1px solid #ccc; }
#slide ul { position:absolute; left:0; }
#slide ul li { float:left; }
#slide ol { height:10px; position:absolute; right:10px; bottom:10px; left:50%; }
#slide ol li { float:left; width:8px; height:8px; overflow:hidden; display:block; border:1px solid #777; background-color:#555; margin-right:5px; }
#slide ol li.active { background-color:#eee; border-color:#ccc; }
#previous, #next { width:20px; height:40px; line-height:32px; text-align:center; display:block; font-size:30px; position:absolute; top:50%; margin-top:-20px; text-decoration:none; color:#fff; background-color:#333; filter:alpha(opacity:80); opacity:.8; cursor:pointer; }
#previous { left:5px; }
#next { right:5px; }
</style>
</head>

<body>


<div id="slide">
    <ul>
        <li><a href="#"><img src="images/1.jpg" width="470" height="150" alt=""></a></li>
        <li><a href="#"><img src="images/2.jpg" width="470" height="150" alt=""></a></li>
        <li><a href="#"><img src="images/3.jpg" width="470" height="150" alt=""></a></li>
        <li><a href="#"><img src="images/4.jpg" width="470" height="150" alt=""></a></li>
    </ul>
</div>



<script>
window.onload = function(){
    var oSlide = document.getElementById("slide");
    var oUl = oSlide.getElementsByTagName("ul")[0];
    var aPic = oSlide.getElementsByTagName("li");
    var timer = null;
    var iNow = 0;
    
    var newPrevious = document.createElement("a");
    newPrevious.setAttribute("id", "previous");
    newPrevious.innerHTML = "&#8249;";
    oSlide.appendChild(newPrevious);
    var newNext = document.createElement("a");
    newNext.setAttribute("id", "next");
    newNext.innerHTML = "&#8250;";
    oSlide.appendChild(newNext);
    var oPrevious = document.getElementById("previous");
    var oNext = document.getElementById("next");
    
    var oOl = document.createElement("ol");
    for(var i=0; i<aPic.length; i++){
        var oLi = document.createElement("li");
        oOl.appendChild(oLi);
    }
    oSlide.appendChild(oOl);
    var aBtn = oSlide.getElementsByTagName("ol")[0].getElementsByTagName("li");
    aBtn[0].className = "active";
    oOl.style.width = (aBtn[0].offsetWidth+5)*aBtn.length+"px";
    oOl.style.marginLeft = -oOl.offsetWidth/2+"px";
    
    oUl.style.width = aPic[0].offsetWidth*aPic.length+"px";
    for(var i=0; i<aBtn.length; i++){
        aBtn[i].index  = i;
        aBtn[i].onmouseover = function(){
            iNow = this.index;
            tab();
        }
    }
    
    function tab(){
        for(var i=0; i<aBtn.length; i++){
            aBtn[i].className = "";
        }
        aBtn[iNow].className = "active";
        //oUl.style.left = -(iNow*aPic[0].offsetWidth)+"px";
        startMove(oUl, {left:-(iNow*aPic[0].offsetWidth)});
    }
    
    function autoPlay(){
        iNow++;
        if(iNow == aBtn.length){
            iNow = 0;
        }
        tab();
    }
    
    oPrevious.onclick = function(){
        iNow--;
        if(iNow == -1){
            iNow = aBtn.length-1;
        }
        tab();
    }
    oNext.onclick = function(){
        autoPlay();
    }
    
    timer = setInterval(autoPlay,3000);
    oSlide.onmouseover = function() { clearInterval(timer); };
    oSlide.onmouseout = function() { timer = setInterval(autoPlay,3000); };
}
</script>


<script>
/**
 * Created with JetBrains WebStorm.
 * User: HuanLei
 * Date: 13-6-24
 * Time: 下午8:37
 * To change this template use File | Settings | File Templates.
 */
function startMove(obj, json, fn){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var bStop = true;
        for(var attr in json){
            var iCur = 0;
            if(attr == "opacity"){
                iCur =  Math.round(parseFloat(getStyle(obj, attr)*100));
            }else{
                iCur = parseInt(getStyle(obj, attr)) || 0;
            };
            var iSpeed = (json[attr]-iCur)/8;
            iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

            if(iCur != json[attr]){
                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 getStyle(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }else{
        return getComputedStyle(obj, false)[attr];
    }
};

function getElementsByClassName(node, classname){
    if(node.getElementsByClassName){
        return node.getElementsByClassName(classname);
    }else{
        var results = [];
        var elems = node.getElementsByTagName("*");
        for(var i=0; i<elems.length; i++){
            if(elems[i].className.indexOf(classname) != -1){
                results[results.length] = elems[i];
            }
        }
        return results;
    }
}
</script>

</body>
</html>

 

 

 

 

 

 

posted @ 2013-06-26 23:52  赵小磊  阅读(261)  评论(0)    收藏  举报
回到头部