轮播图的实现(下)

最新推荐文章于 2021-06-04 11:15:25 发布

霹雳弦惊

最新推荐文章于 2021-06-04 11:15:25 发布

阅读量536

点赞数 1

本文链接：https://blog.csdn.net/qq_33501079/article/details/78032138

版权

基础知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

轮播图的实现（上）实现了图片的依次展示。这篇主要是实习图片的下滑动画。

效果图如下：

由于没有加入事件，只是单纯的实现了动画下滑，循环播放。要加事件可以参考轮播图的实现（上）

实现过程中遇到的问题：

1.由于img的定位设置成relative,导致第一张图片下滑的时，背景图片总是第三张。最后修改为绝对定位解决。

2.没设置z-index，导致图片下滑背景总是白色.

3.对div没有设置overflow:hidden。图片下滑没有隐藏.

优化：

由于涉及setInterval()，将img.length ， li.length , document.getElementsByTagName("strong")[0]放在了定时器的外面。

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="lbq.css">
    <script type="text/javascript" src="lbdh.js" rel="script"></script>
    <title>轮播器</title>
</head>
<body>
    <div id="banner">
        <img src="images/icon1.JPG" alt="风景1">
        <img src="images/icon2.JPG" alt="风景2">
        <img src="images/icon3.JPG" alt="风景3">
        <ul id="UL">
            <li>●</li>
            <li>●</li>
            <li>●</li>
        </ul>
        <span></span>
        <strong>风景1</strong><!--左小角的提示信息-->
    </div>
</body>
</html>

#body{
    margin: 0px;
}
ul li{
    text-decoration: none;
    list-style-type: none;
}
#banner{
    width: 620px;
    height: 400px;
    position: absolute;
    margin: 0px 350px;
    overflow: hidden;
}
#banner img{
    width: 620px;
    height: 400px;
    position:absolute;
    top: 1px;
    overflow: hidden;
    z-index: 1;
    display: none;
}
#banner ul {
    color: #999;
    top: 370px;
    margin: 0px 250px;
    z-index: 3;
    cursor: pointer;
    position: absolute;
}
#banner ul li{
    float: left;
    font-size: 20px;
    padding: 0 5px;
}
#banner span{
    top: 370px;
    width:620px;
    height: 30px;
    background: #333;
    opacity:0.5;
    position: absolute;
    z-index: 4;
}
#banner strong{
    top:370px;
    width: 100px;
    height: 30px;
    left: 10px;
    float: left;
    color: white;
    padding: 5px 0;
    font-size: 16px;
    font-family: 宋体;
    position: absolute;
    z-index: 5;
}

window.οnlοad=function () {
    var img = document.getElementsByTagName("img");
    var num =0;
    var length =img.length;
    var i = 0;
    var strong = document.getElementsByTagName("strong")[0];
    var li = document.getElementsByTagName("li");
    var liLength = li.length;
    var value =setInterval(function () {
            img[i].style.display = "block";
            strong .innerHTML = img[i].alt;
            img[i].style.top = (++num)+"px";
            img[i].style.zIndex = 2;
             li[i].style.cssText="color:red";
             for(var j=0;j<liLength;j++){
                    if(j!=i){
                        li[j].style.color="#999";
                     }
              }
            if(i+1<length){
               img[i+1].style.display = "block";
            }
            else if(i+1 == length){
               img[0].style.display = "block";
            }
            //图片终止的条件
            if (img[i].style.top == "400px"){//这里的400px是根据css中的设定来的
                img[i].style.display = "none";
                img[i].style.top = 0;
                img[i].style.zIndex = 1;
                i++;
                if(i==length){
                    i=0;
                }
                num=0;
            }
    },30);

}

上面是自己的实现方法，可能不是最优的。自己也在慢慢探索当中。由于使用的图片是win10的桌面图片，就不上传了。尺寸1920*1080

霹雳弦惊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图的实现(下)

轮播图的实现（上）实现了图片的依次展示。这篇主要是实习图片的下滑动画。效果图如下：由于没有加入事件，只是单纯的实现了动画下滑，循环播放。要加事件可以参考轮播图的实现（上）实现过程中遇到的问题：1.由于img的定位设置成relative,导致第一张图片下滑的时，背景图片总是第三张。最后修改为绝对定位解决。2.没设置z-index，导致图片下滑背景总是白色.3.对div
复制链接

扫一扫