轮播图的实现(下)

来源：互联网发布：淳安县教育局网络办公编辑：程序博客网时间：2024/06/05 01:35

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

效果图如下：

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

实现过程中遇到的问题：

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.onload=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