简单的图片轮播器（一）：一个关于仿flash的图片轮换器

最新推荐文章于 2020-05-25 02:32:15 发布

殇痕TT

最新推荐文章于 2020-05-25 02:32:15 发布

阅读量761

点赞数 2

分类专栏： web前端文章标签： web 图片

本文链接：https://blog.csdn.net/qq_32676793/article/details/74859765

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

仿flash的图片轮换器

web小渣渣，最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波，发一篇博客记录一波学习历程

最终效果图：

仿flash的图片轮换器

最终代码如下：

tuPianLunHuan.html

<!DOCTYPE html> 
<html> <head lang="en">     
    <meta charset="UTF-8">     
        <title></title>     
        <script src="js/tuPianLunHuan.js" type="text/javascript"></script>     
        <link href="css/tuPianLunHuan.css" type="text/css" rel="stylesheet"> 
</head>
<body> 
    <div id="playImages" class="play">     
        <ul class="big_pic">   
            <!--左右按钮-->
            <div class="prev"></div>         
            <div class="next"></div> 
            <!--将大图片分成左右两块-->
            <a class="mark_left" href="javascript:;"></a>         
            <a class="mark_right" href="javascript:;"></a>  
            <!--图片堆叠-->
            <li style="z-index: 1"><img src="img/1.jpg"></li>        
            <li><img src="img/2.jpg"></li>         
            <li><img src="img/3.jpg"></li>         
            <li><img src="img/4.jpg"></li>           
        </ul>     
        <div class="small_pic">         
            <ul>             
                <li><img src="img/1.jpg"></li>             
                <li><img src="img/2.jpg"></li>             
                <li><img src="img/3.jpg"></li>             
                <li><img src="img/4.jpg"></li>      
            </ul>     
        </div> 
    </div> 
</body> 
</html>

tuPianLunHuan.css

body{  
    margin: 0px;  
    padding: 0px;  
} 

ul{  
    margin: 0px;  
    padding: 0px;  
}  

li{  
    list-style: none;  
} 
.play{ 
    width: 600px;  
    height: 550px;  
    border: 2px solid gray; 
    position: relative;   
    margin: 0 auto;
    margin-top: 20px;
} 

.big_pic{  
    width: 600px;  
    height: 400px; 
    position: relative;  
    background: snow;  
    overflow: hidden;  
} 

/*设置优先级最上面的z-index为1,其他为0， 轮播的时候只要把需要的图片优先级设为1就行了*/
.big_pic li{  
    width: 600px;  
    height: 400px;  
    overflow:hidden; 
    position: absolute;  
    background: black; 
    z-index: 0; 
} 

.big_pic li img{  
    width: 600px;  
    height: 400px;  
    position: absolute;  
} 

.mark_left{  
    width: 300px;  
    height: 400px;  
    background: orange;  
    position: absolute;  
    left: 0px;  
    top: 0px;  
    z-index: 3000;  
     /*隐藏，相当于display：none*/
    filter: alpha(opacity:0);  
    opacity: 0;  
} 

.mark_right{  
    width: 300px;  
    height: 400px;  
    background: aquamarine;  
    position: absolute;  
    left: 300px;  
    top: 0px;  
    z-index: 3000;  
    filter: alpha(opacity:0);  
    opacity: 0;  
} 

.prev{ 
    width: 80px;  
    height: 52px;  
    background: url(../img/btn.png) no-repeat;  
    position: absolute;  
    z-index: 3001;  
    top: 160px;  
    left: 10px;  
    cursor: pointer; 
    filter: alpha(opacity:0);  
    opacity: 0;
} 

.next{  
    width: 80px; 
    height: 52px;  
    background: url(../img/btn.png) no-repeat -80px 0px;  
    position: absolute;  
    z-index: 3001;  
    top: 160px;  
    right: 10px; 
    cursor: pointer; 
    filter: alpha(opacity:0);  
    opacity: 0;  
} 

.small_pic{  
    width: 594px; 
    height: 144px;
    position: relative;
    top: 0;left: 0; 
    border: 3px solid paleturquoise;
    overflow: hidden;
}

.small_pic ul{  
    width: 594px;  
    height: 144px;  
    position: absolute; 
    left: 0px;
    top: 0px;
} 

.small_pic li img{  
    width: 194px;  
    height: 140px;   
} 

.small_pic ul li{  
    border:2px solid paleturquoise;
    width: 194px; 
    height: 140px;  
    float: left;  
    cursor: pointer;  
    filter: alpha(opacity:60);  
    opacity: 0.6;  
}

tuPianLunHuan.js

window.onload=function(){     
    var oPlay=document.getElementById('playImages');     
    var uBig=getClass(oPlay,'big_pic')[0];     
    var uSmall=getClass(oPlay,'small_pic')[0];     
    var oPrev=getClass(oPlay,'prev')[0];     
    var oNext=getClass(oPlay,'next')[0];     
    var aLeft=getClass(oPlay,'mark_left')[0];     
    var aRight=getClass(oPlay,'mark_right')[0];     
    var oUlSmall=uSmall.getElementsByTagName('ul')[0];     
    var oSli=uSmall.getElementsByTagName('li');     
    var oBli=uBig.getElementsByTagName('li');     
    oUlSmall.style.width=oSli[0].offsetWidth*oSli.length+'px';

    //移动到左按钮时，或者移入图片左边的区域时， 慢慢显示左边的按钮
    oPrev.onmouseover=aLeft.onmouseover=function(){         
        move(oPrev,100,'opacity');   
//      move(aLeft,100,'opacity');    
    };     

    //移动到左按钮时，或者移出图片左边的区域时， 慢慢显示左边的按钮
    /*oPrev.onmouserout=*/aLeft.onmouseout=function(){         
        move(oPrev,0,'opacity');
//      move(aLeft,0,'opacity'); 
    };     

    oNext.onmouseover=aRight.onmouseover=function(){         
        move(oNext,100,'opacity'); 
//      move(aRight,100,'opacity'); 
    };     

    /*oNext.onmouseout=*/aRight.onmouseout=function(){         
        move(oNext,0,'opacity');  
//      move(aRight,0,'opacity'); 
    };

    //第几张图片
    var index=0; 
    //图片的优先级
    var newZIndex=2;

    //添加所有下面小图片的点击事件和移入移出事件
    for (var i=0;i<oSli.length;i++){         
        oSli[i].num=i;         
        oSli[i].onclick=function(){             
            if(this.num==index) {                 
                return;             
            } else{                 
                index=this.num;                 
                tab();             
            }         
        }; 

        oSli[i].onmouseover=function(){             
            move(this,100,'opacity');         
        };

        oSli[i].onmouseout=function(){
            if(this.num!=index){                 
                move(this,60,'opacity');            
            }         
        };     
    }  
//  左按钮的点击事件,当最左边的时候将调到最右边
    oPrev.onclick=function(){         
        index--;         
        if(index==-1){             
            index=oSli.length-1;         
        }         
        tab();
    };   

//  右按钮的点击事件,当最左边的时候将调到最左边
    oNext.onclick=function(){         
        index++;         
        if(index==oBli.length){             
            index=0;         
        }         
        tab();     
    }; 

    function tab() { 
//      图片下拉显示效果
        oBli[index].style.height = 0;  
        //把要显示的图片优先级变成最高，这样就可以覆盖之前的图片（当然这里会有一点小问题，也不想改了）
        oBli[index].style.zIndex = newZIndex++;         
        move(oBli[index], 400, 'height');  
        //其他所有的small预览图片编程0.6的透明度
        for (var i = 0; i < oSli.length; i++) {             
            move(oSli[i], 60, 'opacity');         
        }
        //选中小图片的变成1的透明度
        move(oSli[index], 100, 'opacity'); 

        //选中后让线面的small预览图片，移动到中间（到边界时除外）
        if (index == 0) {             
            move(oUlSmall, 0, 'left');         
        } else if (index == oSli.length - 1) {             
            move(oUlSmall, -(index - 2) * oSli[0].offsetWidth, 'left');         
        } else {             
            move(oUlSmall, -(index - 1) * oSli[0].offsetWidth, 'left');         
        }     
    };

    //定时器轮播
    var timer=setInterval(oNext.onclick,3000);   
//  移入的时候停止轮播
    oPlay.onmouseover=function(){         
        clearInterval(timer);
    };

//  移出的时候开启定时器,开始轮播
    oPlay.onmouseout=function(){
        timer=setInterval(oNext.onclick,3000);     
    }; 
}; 



function move(obj,iTarget,name){
    //保证只有一个定时器
    clearInterval(obj.timer);     
    obj.timer=setInterval(function(){    
        var cur=0;         
        if(name=='opacity'){          
            //获取非行间样式css的透明度
            cur=Math.round(parseFloat(getStyle(obj,name))*100);         
        }else{

            cur=parseInt(getStyle(obj,name));
        }
//      alert(name+cur);

        //渐变缓冲，
        var speed=(iTarget-cur)/30;
        //取整
        speed=speed>0?Math.ceil(speed):Math.floor(speed);         
        if(cur==iTarget){
            //消除定时器
            clearInterval(obj.timer);         
        }else{             
            if(name=='opacity'){
//              设置透明度
                obj.style.opacity=(cur+speed)/100;                 
                obj.style.filter='alpha(opacity:'+cur+speed+')';             
            }else{
                //这里用来设置left的
                var cur2 = cur+speed;
                obj.style.filter='alpha(opacity:'+cur2+')';    //兼容<=ie8                
            }         
        }     
    },30); 
}; 


function getStyle(obj,name){
    if(obj.currentStyle){
//      runtimeStyle 运行时的样式！如果与style的属性重叠，将覆盖style的属性！
//      currentStyle 指 style 和 runtimeStyle 的结合！ 通过currentStyle就可以获取
//      到通过内联或外部引用的CSS样式的值了（仅限IE）
        return obj.currentStyle[name];     
    }else{       
        //要兼容FF，就得需要getComputedStyle 出马了
        return getComputedStyle(obj,false)[name];     
    } 
};

//获取class
function getClass(oParent,name){     
    var oArray=[];    
    //获取所有的标签名
    var oBj=oParent.getElementsByTagName('*');     
    for(var i=0;i<oBj.length;i++){     
        //找到目标的class名
        if(oBj[i].className==name){      
            //推到数组里面去
            oArray.push(oBj[i]);         
        }
    }     
    //返回数组
    return oArray; 
}

源代码

殇痕TT

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
简单的图片轮播器（一）：一个关于仿flash的图片轮换器

仿flash的图片轮换器web小渣渣，最近在网上看了一个n年前的视屏(地址这里)照着视屏的代码参照网上的写了一波，发一篇博客记录一波学习历程最终效果图：最终代码如下：tuPianLunHuan.html<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></titl
复制链接

扫一扫