仿flash实现图片轮换播放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    html,body,ul,img{margin:0;padding:0;color:#fff;}
    body{background:#666;}
    img{border:none;}
    li{list-style:none;}
    #playImages{width:400px;height:430px;background:#CCC;margin:50px auto;font:12px Arial;}
    #big_images{width:400px;height:320px;position:relative;}
    #big_images .prev,#big_images .next{position:absolute;top:131px;width:60px;height:58px; filter:alpha(opacity=0);opacity:0;z-index:101;}
    #big_images .prev{left:10px;background:url(images/left_btn.jpg);}
    #big_images .next{right:10px;background:url(images/right_btn.jpg);}
    #big_images .mark{position:absolute;bottom:0;left:0;width:400px;height:30px;background:#000;filter:alpha(opacity=50);opacity:0.5;z-index:102;}
    #big_images .text,#big_images .number{position:absolute;top:9px;z-index:102;}
    #big_images .text{left:0;}
    #big_images .number{right:0;}
    
    #big_images .mark_left,#big_images .mark_right{position:absolute;top:0;width:200px;height:320px;filter:alpha(opacity=0);opacity:0;cursor:pointer;z-index:100;}
    #big_images .mark_left{left:0;}
    #big_images .mark_right{right:0;}
    #big_images li{width:400px;height:320px;overflow:hidden;position:absolute;}/*①*/
    #big_images .active{z-index:1;}
    #big_images img{width:400px;height:320px;}
    
    #small_images{width:400px;height:110px;position:relative;overflow:hidden;}
    #small_images ul{position:absolute;height:110px;overflow:hidden;}
    #small_images li{float:left;padding-top:7px;padding-left:10px;filter:alpha(opacity=30);opacity:0.3;}
    #small_images img{width:120px;height:96px;}    
    #small_images .active{filter:alpha(opacity=100);opacity:1;}
    
    /*说明：①/*需要加上绝对定位后面使用z-index才生效,这里只有加上overflow，height下拉渐变效果才能显示出来，因为在运动的过程中height是一点点变的，其他的部分需要隐藏才能显示出下拉渐变这种效果*/
*/
</style>
<script src="move.js"></script>
<script>
    function getClassName(oParent,sClass){
        var aEle = oParent.getElementsByTagName('*');
        var aResult = [];
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className == sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    }
    
    window.onload = function(){
         var oDiv = document.getElementById('big_images');
         var oBtnPrev = getClassName(oDiv,'prev')[0];
         var oBtnNext = getClassName(oDiv,'next')[0];
         var oMarkLeft = getClassName(oDiv,'mark_left')[0];
         var oMarkRight = getClassName(oDiv,'mark_right')[0];
         var bigUl = oDiv.getElementsByTagName('ul')[0];
         var bigLi = bigUl.getElementsByTagName('li');
         var oSmallDiv = document.getElementById('small_images');
         var smallUl = oSmallDiv.getElementsByTagName('ul')[0];
         var smallLi = oSmallDiv.getElementsByTagName('li');
         
         var smallText = getClassName(oDiv,'text')[0];
         var smallNumber = getClassName(oDiv,'number')[0];
         var arrPicture =['图片一','图片号','图片3'];
         
         var iNow = 0;
         var imageZindex = 2;
         smallUl.style.width = (smallLi[0].offsetWidth*smallLi.length)+'px';
         
         init();
         var timer = null;
         clearInterval(timer);
         timer = setInterval(function(){
             iNow++;
             if(iNow == smallLi.length){
                 iNow = 0;
             }
             tab();
         },3000);
        //上面的左右按钮
         oBtnPrev.onmouseover = oMarkLeft.onmouseover = function(){ 
             startMove(oBtnPrev,'opacity',100);
             
         };
         oBtnPrev.onmouseout = oMarkLeft.onmouseout = function(){
              startMove(oBtnPrev,'opacity',0);
         };
         
         oBtnNext.onmouseover = oMarkRight.onmouseover = function(){
             startMove(oBtnNext,'opacity',100); 
         };
         oBtnNext.onmouseout = oMarkRight.onmouseout = function(){
              startMove(oBtnNext,'opacity',0);
             
         }; 
        for(var i=0;i<smallLi.length;i++){
            smallLi[i].index = i;
            smallLi[i].onmouseover = function(){
                startMove(this,'opacity',100);
            };
            smallLi[i].onmouseout = function(){
                if(this.index != iNow){
                    startMove(this,'opacity',30);
                }
            };
            
            smallLi[i].onclick = function(){
                if(iNow == this.index){
                    return;
                }
                iNow = this.index;
                tab();
            };
        }
        
        oBtnPrev.onclick = function(){
            iNow--;
            if(iNow == -1){
                iNow = smallLi.length-1;
            }
            tab();
        };
        
        oBtnNext.onclick = function(){
            iNow++;
            if(iNow == smallLi.length ){
                iNow = 0;
            }
            tab();
        };
        
        function init(){
            smallText.innerHTML = arrPicture[iNow%arrPicture.length];
            smallNumber.innerHTML = iNow+1+'/'+smallLi.length;
        }
        
        function tab(){
            
            for(var j=0;j<smallLi.length;j++){
                startMove(smallLi[j],'opacity',30);
                bigLi[iNow].style.zIndex = 1;
            }
            startMove(smallLi[iNow],'opacity',100);
            bigLi[iNow].style.zIndex = imageZindex++;
            bigLi[iNow].style.height = 0;
            startMove(bigLi[iNow],'height',320);
            if(iNow ==0){
                startMove(smallUl,'left',0);
            }else if(iNow == smallLi.length-1){
                startMove(smallUl,'left',-(iNow-2)*smallLi[0].offsetWidth)
            }else{
                startMove(smallUl,'left',-(iNow-1)*smallLi[0].offsetWidth);
            }
            init();
        }
        
    };
    
    
</script>
</head>

<body>
<div id='playImages'>
    <div id='big_images'>
        <span class='prev'></span>
        <span class='next'></span>
        <div class="mark">
            <span class='text'>图片正在加载……</span>
            <span class='number'>计算图片数量……</span>
        </div>
        <a class='mark_left' href='javascript:;'></a>
        <a class='mark_right' href='javascript:;'></a> 
        <ul>
            <li class='active'><img src = 'images/1.jpg'></li>
            <li><img src = 'images/2.jpg'></li>
            <li><img src = 'images/3.jpg'></li>
            <li><img src = 'images/4.jpg'></li>
            <li><img src = 'images/5.jpg'></li>
            <li><img src = 'images/6.jpg'></li>
            <li><img src = 'images/7.jpg'></li>
        </ul>
    </div>
    <div id='small_images'>
        <ul>
            <li class ='active'><img src = 'images/1.jpg'></li>
            <li><img src = 'images/2.jpg'></li>
            <li><img src = 'images/3.jpg'></li>
            <li><img src = 'images/4.jpg'></li>
            <li><img src = 'images/5.jpg'></li>
            <li><img src = 'images/6.jpg'></li>
            <li><img src = 'images/7.jpg'></li>
        </ul>
    </div>
</div>
</body>
</html>
仿flash实现图片轮换播放

猜你喜欢
