Question

我需要一些帮助，以便使用javascript和/或CSS在网站上添加幻灯片显示代码。如果可能，我想使图像加载更平滑。这是我尝试编写代码的第一个网站，但我不知道如何在此代码中添加淡入/淡出功能。

这是我的代码：

JS

getTenant

CSS

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

        <script>

          var coverImage=new Array()

              coverImage[0]="images/covers/image1.jpg"
              coverImage[1]="images/covers/image2.jpg"
              coverImage[2]="images/covers/image3.jpg"
              coverImage[3]="images/covers/image4.jpg"
              coverImage[4]="images/covers/image5.jpg"
              coverImage[5]="images/covers/image6.jpg"
              coverImage[6]="images/covers/image7.jpg"
              coverImage[7]="images/covers/image8.jpg"
              coverImage[8]="images/covers/image9.jpg"
              coverImage[9]="images/covers/image10.jpg"
              coverImage[10]="images/covers/image11.jpg"
              coverImage[11]="images/covers/image12.jpg"
              coverImage[12]="images/covers/image13.jpg"
              coverImage[13]="images/covers/image14.jpg"
              coverImage[14]="images/covers/image15.jpg"
              coverImage[15]="images/covers/image16.jpg"
              coverImage[16]="images/covers/image17.jpg"
              coverImage[17]="images/covers/image18.jpg"
              coverImage[18]="images/covers/image19.jpg"
              coverImage[19]="images/covers/image20.jpg"
              coverImage[20]="images/covers/image21.jpg"
              coverImage[21]="images/covers/image22.jpg"
              coverImage[22]="images/covers/image23.jpg"
              coverImage[23]="images/covers/image24.jpg"
              coverImage[24]="images/covers/image25.jpg"
              coverImage[25]="images/covers/image26.jpg"
              coverImage[26]="images/covers/image27.jpg"
              coverImage[27]="images/covers/image28.jpg"
              coverImage[28]="images/covers/image29.jpg"
              coverImage[29]="images/covers/image30.jpg"
              coverImage[30]="images/covers/image31.jpg"
              coverImage[31]="images/covers/image32.jpg"
              coverImage[32]="images/covers/image33.jpg"
              coverImage[33]="images/covers/image34.jpg"
              coverImage[34]="images/covers/image35.jpg"
              coverImage[35]="images/covers/image36.jpg"
              coverImage[36]="images/covers/image37.jpg"
              coverImage[37]="images/covers/image38.jpg"
              coverImage[38]="images/covers/image39.jpg"
              coverImage[39]="images/covers/image40.jpg"
              coverImage[40]="images/covers/image41.jpg"
              coverImage[41]="images/covers/image42.jpg"
              coverImage[42]="images/covers/image43.jpg"
              coverImage[43]="images/covers/image44.jpg"
              coverImage[44]="images/covers/image45.jpg"
              coverImage[45]="images/covers/image46.jpg"


          //feature preloading images 

          var processing=new Array()
          for (i=0;i<coverImage.length;i++){
              processing[i]=new Image()
              processing[i].srd=coverImage[i]
            }

          var slide=-1
          var divID = 'login'; // determine used DIV

          function time(){
            if (slide<coverImage.length-1)

                slide++

            else

             slide=0

             document.getElementById(divID).background=processing[Math.floor(Math.random()*coverImage.length)].srd 
             //document.getElementById(divID).style.background = 'url("'+coverImage[slide]+'")';
             document.getElementById(divID).style.background = 'url("'+ coverImage[Math.floor(Math.random()*coverImage.length)]+'")';
             document.getElementById(divID).style.backgroundSize = "cover";

            }

             window.onload = load;

            function load()
            {
             setInterval("time()",5000); //change every 5 seconds.
             }
</script>

HTML

<style>

            body {
                padding-top: 60px;
                font-size: 14px;
                -ms-text-size-adjust: 100%;
                -webkit-text-size-adjust: 100%;
            }

            #login {
                background-image: url("images/covers/image0.jpg");
                background-position: center;
                background-size: cover;
            }
</style>

如何在此代码中添加淡入/淡出？

谢谢..

需要帮助将淡入淡出添加到幻灯片中吗？

0 个答案: