（年薪30万）淡入淡出轮播图。CSS+JS

最新推荐文章于 2022-11-12 00:01:37 发布

华洛

最新推荐文章于 2022-11-12 00:01:37 发布

阅读量301

点赞数 2

分类专栏： CSS javascript HTML

本文链接：https://blog.csdn.net/sdta25196/article/details/78295611

版权

javascript 同时被 3 个专栏收录

95 篇文章 2 订阅

订阅专栏

HTML

49 篇文章 1 订阅

订阅专栏

CSS

19 篇文章 0 订阅

订阅专栏

一个有淡入淡出与拉远效果的四张图自动轮播图。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>自动轮播图</title>
   
   <script type="text/javascript" src="./js/jquery-1.8.2.min.js"></script>
</head>
<body>
   <div id="box_A">
       <div id="box">
               <img src="./img/kv04.jpg" alt="" width="100%" height="400" />
               <img src="./img/kv03.jpg" alt="" width="100%" height="400" />
               <img src="./img/kv02.jpg" alt="" width="100%" height="400" />
               <img src="./img/kv01.jpg" alt="" width="100%" height="400" />
       </div>
   </div>
   <style>
       #box_A{
           height: 400px;
       }
       #box{
           width:100%;
           height:400px;
           overflow:hidden;
           position: absolute;
       }
        #box img{
          transform:scale(1.2,1.2);
           position: absolute;
           top: 0;
          left: 0;
           opacity: 0;
          transition: opacity 2s linear,transform 6s linear;
        }
        #box img.off{
          transform:scale(1,1);
           position: absolute;
           top: 0;
          left: 0;
           opacity: 0;
          transition: opacity 3s linear,transform 6s linear;
        }
       #box img.active{
           opacity: 1;
          transform:scale(1,1);
          z-index: 999;
        }
   </style>
   <script type="text/javascript">
       function slideshow() {
          var slideshow=document.getElementById("box"),
          imgs=slideshow.getElementsByTagName("img"), //得到图片们
          current=0; //current为当前展现的图片编号

          function slideOff() {
            imgs[current].className="off"; //图片淡出透明度效果
          }
          function slideOff_B() {
                imgs[current].className=""; //图片淡出拉近效果
          }
          function slideOn() {
            imgs[current].className="active"; //图片淡入透明度与拉远效果同时进行
          }
          function first(){
               imgs[0].className="active";
          }
          function changeSlide() { //切换图片的函数
           slideOff(); //图片淡出
//             imgs[current].style.display="";
            current++; //自增1
            if(current>=imgs.length){
                current=0;

//下面控制图片淡出拉近效果/如果需要更多或是更少的图片轮播这个地方需要换掉。把当前活跃图片前第二个拉进。

                 imgs[2].className="";
            }else if(current==1){
                  imgs[3].className="";
            }else if(current==2){
                  imgs[0].className="";
            }else if(current==3){
                  imgs[1].className="";
            }
            slideOn(); //图片淡入
          }
          //第一张图轮播
          var f = first();
          //每5s调用changeSlide函数进行图片轮播
          var slideon=setInterval(changeSlide,5000);
       }

slideshow();

</script>
</body>
</html>