使用原生javascript和css实现图片轮播效果

最新推荐文章于 2024-01-05 15:23:10 发布

侠之大者为国为民

最新推荐文章于 2024-01-05 15:23:10 发布

阅读量850

点赞数 2

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/sofeien/article/details/54908955

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>图片轮播</title>
    
    <style>
        #box {
            width:506px;
            height:306px;
            margin: 20px auto;
            border:3px solid black;
            position:relative;
            background-color:orange;
            overflow: hidden;
            /*overflow: hidden;*/
        }
        .pic {
            position: absolute;
            width:500px;
            height:300px;
            line-height: 300px;
            text-align: center;
            font-size: 100px;
            color:white;
            bottom:0;
        }
        .red {
            background-color:red;
        }
        .green {
            background-color:green;
        }
        .blue {
            background-color:blue;
        }
        .orange{
            background-color: orange;
        }
        .move {
            bottom:300px;
            transition:bottom .5s; /* 设置图片移动消耗的时间*/
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="pic1" class="pic red">1</div>
        <div id="pic2" class="pic green">2</div>
        <div id="pic3" class="pic blue">3</div>
        <div id="pic3" class="pic orange">4</div>
    </div>
    
    
    <script>
        window.addEventListener('load',function(){
            //轮播定时器
            var looptime = null;
			var looptime2 = null;
            
            var pics = document.getElementsByClassName('pic');
            
            //为每个pic元素设置z-index的值
            for(let i=0;i<pics.length;i++){
                pics[i].style.zIndex = pics.length-i;
            }
            
            //循环播放图片的函数
            var loopPics = (function(){
                var index;
                return function(pics,delay){
                    var recall = function(pic){
                        //给图片增加move类，调用css的transition属性播放移动动画
                        pic.className += ' move';
						index++;
                        if(index==pics.length) index=0;
                        looptime2=setTimeout(function(){
                            //取消图片的move类，图片返回原位
                            pic.className=pic.className.replace(' move','');
                            //改变图片组的堆叠顺序。最外的图片放到最下面，其他图片依次向外移动
                            for(let i=0;i<pics.length;i++){
                                if(pics[i].style.zIndex==pics.length){
                                    pics[i].style.zIndex=1;
                                } else {
                                    pics[i].style.zIndex=pics[i].style.zIndex*1+1;
                                }
                            }
                        },500);
						looptime=setTimeout(function(){recall(pics[index]);},delay+500);
                    };
                    //选择当前最顶层的图片开始轮播
                    for(let i=0;i<pics.length;i++)
                    {
                        if(pics[i].style.zIndex==pics.length){
                            index=i;
                            break;
                        }
                    }
                    recall(pics[index]);
                };
            })();
            //调用函数，循环播放。delay的时间等于图片轮播的间隔时间
            loopPics(pics,3000);
            //鼠标放置在图片区域时停止轮播
            document.getElementById('box').onmouseover = function(){
                clearTimeout(looptime);
                clearTimeout(looptime2);
                for(let i=0;i<pics.length;i++){
                    pics[i].className=pics[i].className.replace(' move','');
                }
            };
            //鼠标离开图片区域后继续轮播
            document.getElementById('box').onmouseout = function(){
                loopPics(pics,3000);
            };
        });

    </script>
</body>

</html>