首页 > 网站 > WEB开发 > 正文

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

2024-04-27 15:10:39
字体:
来源:转载
供稿:网友
<!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>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表