隐藏 div 直到完全加载并在 js onclick 滑块上添加淡入淡出效果

Question

我从未编写过代码，但我正在构建自己的摄影页面。这是一个简单的想法；只是一个点击幻灯片。我可以通过创建一个包含图像的 div 并使用 js 实现 onclick 效果来实现这一点。但是，我可以在幻灯片隐藏在第一个图像后面之前看到所有图像加载，并且想知道是否有隐藏 div 直到内容完全加载。另外，我想在每张图片之间添加淡入淡出 ou/in 效果。有人可以告诉我吗？到目前为止我的代码是：

<title>Untitled Document</title>
<style type="text/css">
.middle {
    text-align: center;
}
</style>
</head>

<body class="middle">
<p><img src="header.jpg" width="131" height="21" alt="guilimora" /></p>
<p>&nbsp;</p>
<p><span style="text-align: center"></span></p>

<div id="imgs">
  <div align="center">
  <img src="../PHOTOGRAPHS/01-yankees bitch.jpg" alt="img1" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/02-where the sun shines best.JPG" alt="img2" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/03-keep on rolling.jpg" alt="img3" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/04-534 am.JPG" alt="img4" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/05-penguin smokes.jpg" alt="img5" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/06-quaint.jpg" alt="img6" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/07-downtown mary.JPG" alt="img7" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/08-untitled.jpeg" alt="img8" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/09-14190012.jpg" alt="img9" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/10-30470064.JPG" alt="img10" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/11-30460001.JPG" alt="img11" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/12-no trees.JPG" alt="imh12" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/13-little you or smaller I.jpg" alt="img13" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/14 - salvation.jpeg" alt="img14" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/15-afterlight-343.jpeg" alt="img15" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/16 afterlight-233 2.jpg" alt="img16" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/17 80760026.JPG" alt="img17" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/18 49750012.jpg" alt="img18" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/19 nope.JPG" alt="img19" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/20 30470138.JPG" alt="img20" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/21 93470016.JPG" alt="img21" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/22 babe the beer.jpg" alt="img22" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/23 08450037.jpg" alt="img23" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/24 ny.jpg" alt="img24" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/25 - bruised benja.jpg" alt="img25" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/26 - madam m.jpg" alt="img26" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/27 51770018.JPG" alt="img27" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/28 23700024.jpg" alt="img28" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/29 49630021 trat.jpg" alt="img29" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/30 afterlight-324.jpeg" alt="img30" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/31 IMG_1078 trat.jpg" alt="img31" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/32 05810018 copy.jpg" alt="img32" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/33 - wanna go wanna go wanna go.jpg" alt="img33" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/34 46080021.jpg" alt="img34" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/35 Image-1-1.jpg" alt="img35" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/36 Image-1-11 copy.jpg" alt="img36" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/37 30460024.JPG" alt="img37" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/38 smoking on my way to.jpg" alt="img38" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/39 where does she go.jpg" alt="img39" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/40 IMG_1264.jpg" alt="img40" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/41 44170017.JPG" alt="img41" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/42 49750004.jpg" alt="img42" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/43 30470029 trat.jpg" alt="img43" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/44 afterlight-266.jpeg" alt="img44" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/45 91930027.JPG" alt="img45" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/46 91930008 copy.jpg" alt="img46" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/47 49750028.jpg" alt="img47" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/48 93470001.jpg" alt="img48" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/49 afterlight-32.jpg" alt="img49" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/50 03140034.JPG" alt="img50" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/51 04500006.jpg" alt="img51" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/52 30470008.jpg" alt="img52" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/53 Image-1.jpg" alt="img53" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/54 handsome julio.jpg" alt="img54" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/55 30470046.JPG" alt="img55" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/56 80760027 copy.jpg" alt="img56" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/57 30470019 5.jpg" alt="img57" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/58 0283035.jpg" alt="img58" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/59 30470080.JPG" alt="img59" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/60 IMG_3936.jpg" alt="img60" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/61 sf.jpg" alt="img61" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/62 01360034.jpg" alt="img62" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/63 afterlight-332.jpeg" alt="img63" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/64 afterlight-264.jpeg" alt="img64" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/65 afterlight-237.jpeg" alt="img65" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/66 30470106 copy.jpg" alt="img66" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/67 unti.JPG" alt="img67" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/68 04470013.jpg" alt="img68" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/69 80770023.JPG" alt="img69" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/70 afterlight-347.jpeg" alt="img70" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/71 ntitled.jpg" alt="img71" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/72 DSC03987 2.jpg" alt="img72" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/73 80760030 copy.jpg" alt="img73" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/74 afterlight-244.jpg" alt="img74" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/75 i67487664.jpg" alt="img75" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/76 DSC02973.JPG" alt="img76" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/77 80760029 copy.jpg" alt="img77" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/78 IMG_1347 2.jpg" alt="img78" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/79 IMG_1068.JPG" alt="img79" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/80 IMG_2219.JPG" alt="img80" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/81 30460025.JPG" alt="img81" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/82 03170008.jpg" alt="img82" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/83 CIMG0062 trat.jpg" alt="img83" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/84 IMG_1058 3.jpg" alt="img84" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/85 afterlight-338.jpeg" alt="img85" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/86 49750024.jpg" alt="img86" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/87 untitled.jpg" alt="img87" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/88 IMG_1775 trat.jpg" alt="img88" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/89 30460023.JPG" alt="img89" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/90 IMG_1271 trat 1.jpg" alt="img90" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/91 afterlight-306 2.jpeg" alt="img91" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/92 DSC04375.jpg" alt="img92" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/93 death and all the rest.jpg" alt="img93" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/94 afterlight-284.jpeg" alt="img94" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/95 DSC03209.jpg" alt="img95" height="500" width="auto"/>
  <img src="../PHOTOGRAPHS/96 74860030 trat.jpg" alt="img96" width="auto" height="500" class="imgs"/>
  </div>


<script type="text/javascript"> 
 var port_imgs, i;
    window.onload = function () {
            //get all the images in "#imgs"
        port_imgs = document.getElementById("imgs").getElementsByTagName("img");
           //loop through, hiding them all
        for (i = 0; i < port_imgs.length; i++) {
            port_imgs[i].style.display = "none";
                    //wire up the click event and do the magic
            port_imgs[i].onclick = (function (k) {
                var r = function () {
                    this.style.display = "none";
                    if (k >= port_imgs.length) { k = 0 }
                    port_imgs[k].style.display = "block";
                };
                return r;
            })(i+1);
        }
            //un-hide (display) the first image so we're all set to go
        port_imgs[0].style.display = "block";
    }
</script>


</body>
</html>

Answer 1

在样式中尝试以下代码。将时间从 2 秒更改为适合您的时间。希望这可以帮助。

img{
  display: none;
}

@keyframes fadeIn {
  to {
   opacity: 1;
  }
}

img {
  opacity: 0;
  animation: fadeIn 2s ease-in 1 forwards;
}

这是您的代码中的更改。请更改图片路径

<title>Untitled Document</title>
<style type="text/css">
  .middle {
    text-align: center;
  }

  img {display: none;}

  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }

  img {
    opacity: 0;
    animation: fadeIn 2s ease-in 1 forwards;
  }
</style>
</head>

<body class="middle">
  <!-- <p><img src="header.jpg" width="131" height="21" alt="guilimora" /></p> -->
  <p>&nbsp;</p>
  <p>
    <span style="text-align: center"></span>
  </p>

  <div id="imgs">
    <div align="center">
      <img src="img/1.png" alt="img1" height="500" width="auto" />
      <img src="img/2.png" alt="img1" height="500" width="auto" />
      <img src="img/3.png" alt="img1" height="500" width="auto" />

    </div>


    <script type="text/javascript">
      var port_imgs, i;
      window.onload = function() {
        port_imgs = document.getElementById("imgs").getElementsByTagName("img");
        for (i = 0; i < port_imgs.length; i++) {
          port_imgs[i].style.display = "none";
          port_imgs[i].onclick = (function(k) {
            var r = function() {
              this.style.display = "none";
              if (k >= port_imgs.length) {
                k = 0
              }
              port_imgs[k].style.display = "block";
            };
            return r;
          })(i + 1);
        }
        port_imgs[0].style.display = "block";
      }
    </script>


</body>

</html>

Answer 2

更新

此版本基于插件 bxSlider。它有点问题，但用途广泛，已经存在了一段时间。根据经验，我建议不要使用最小化版本 (jquery.bxslider.min.js)。而是使用开发人员的版本 (jquery.bxslider.js)。该解决方案包含 2 个文件：

bx.html（文件和名称当然是可选的）
bxmod.css（必填，但名称可选）

原始样式表 jquery.bxslider.css 具有引用一些不需要的背景图像的相对 URL，以及一些与 "minimalist theme" 不一致的边框和框阴影。 bxmod.css 反映了这些变化。

有关速度和自定义样式等更精细粒度控制的更多详细信息，请参阅评论。

/* This is bxmod.css, 
** copy and paste into a separate file
** and place it in the same  directory 
** where bx.html is located. 
*/

@charset "utf-8";

/** bxMod -=- Modified bxSlider Style
 * bxSlider v4.2.5
 * Copyright 2013-2015 Steven Wanderski
 * Written while drinking Belgian ales and listening to jazz

 * Licensed under MIT (http://opensource.org/licenses/MIT)
 */

/** VARIABLES 
===================================*/

/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
  position: relative;
  margin: 0 auto 60px;
  padding: 0;
  *zoom: 1;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
}
.bx-wrapper img {
  max-width: 100%;
  display: block;
}
.bxSlider {
  margin: 0;
  padding: 0;
}
ul.bxSlider {
  list-style: none;
}
.bx-viewport {
  /*fix other elements on the page moving (on Chrome)*/
  -webkit-transform: translatez(0);
}
/** THEME
===================================*/

.bx-wrapper {
  /* -moz-box-shadow: 0 0 5px #ccc;
  -webkit-box-shadow: 0 0 5px #ccc;
  box-shadow: 0 0 5px #ccc; */
  /* border: 5px solid #fff; */
  /* background: #fff; */
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
  position: absolute;
  bottom: -30px;
  width: 100%;
}
/* LOADER */

.bx-wrapper .bx-loading {
  min-height: 50px;
  /* background: url('images/bx_loader.gif') center center no-repeat #ffffff; */
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
}
/* PAGER */

.bx-wrapper .bx-pager {
  text-align: center;
  font-size: .85em;
  font-family: Arial;
  font-weight: bold;
  color: #666;
  padding-top: 20px;
}
.bx-wrapper .bx-pager.bx-default-pager a {
  background: #666;
  text-indent: -9999px;
  display: block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  outline: 0;
  border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus {
  background: #000;
}
.bx-wrapper .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.bx-wrapper .bx-pager-item {
  font-size: 0;
  line-height: 0;
}
/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
  left: 10px;
  /*  background: url('images/controls.png') no-repeat 0 -32px; */
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  /*  background: url('images/controls.png') no-repeat -43px -32px; */
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
  display: none;
}
/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
  text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
  display: block;
  text-indent: -9999px;
  width: 10px;
  height: 11px;
  outline: 0;
  /* background: url('images/controls.png') -86px -11px no-repeat; */
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active,
.bx-wrapper .bx-controls-auto .bx-start:focus {
  background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
  display: block;
  text-indent: -9999px;
  width: 9px;
  height: 11px;
  outline: 0;
  /* background: url('images/controls.png') -86px -44px no-repeat; */
  margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active,
.bx-wrapper .bx-controls-auto .bx-stop:focus {
  background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
  text-align: left;
  width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
  right: 0;
  width: 35px;
}
/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #666;
  background: rgba(80, 80, 80, 0.75);
  width: 100%;
}
.bx-wrapper .bx-caption span {
  color: #fff;
  font-family: Arial;
  display: block;
  font-size: .85em;
  padding: 10px;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>BxSlider -=- Minimal | bx.html</title>
  <link rel="stylesheet" href="bxmod.css">
  <style>
    /* Styles Optional */
    /* Eliminates the blue select background */
    ::-moz-selection {
      background: none;
    }
    ::selection {
      background: none;
    }
    /* Resets */
    html {
      box-sizing: border-box;
      font: small-caps 400 16px/1.45'Source Code Pro';
    }
    *,
    *:before,
    *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
      border: 0 solid transparent;
      text-decoration: none;
      list-style: none;
    }
    /* Demo styles */
    body {
      background: #000;
      color: #FFF;
      margin-left: 1em;
    }
    a:visited {
      color: grey;
    }
  </style>

</head>

<body>
  <header>
    <!-- Header Optional -->
    <h1>BxSlider -=- Minimal</h1>
  </header>

  <ul class="bxSlider">
    <li>
      <img src="https://placehold.it/500x281/000/fff.png&text=500x281" />
    </li>
    <li>
      <img src="https://placehold.it/500x375/0ff/111.png&text=500x375" />
    </li>
    <li>
      <img src="https://placehold.it/500x500/fc0/00e.png&text=500x500" />
    </li>
    <li>
      <img src="https://placehold.it/500x625/0f0/f00.png&text=500x625" />
    </li>
    <li>
      <img src="https://placehold.it/500x719/fff/000.png&text=500x719" />
    </li>
    <li>
      <img src="https://www.libsdl.org/projects/SDL_image/docs/demos/lena.jpg" />
    </li>
    <li>
      <img src="https://upload.wikimedia.org/wikipedia/en/0/04/TCF_centre.jpg" />
    </li>
    <li>
      <img src="https://wanderingvegans.files.wordpress.com/2009/08/himejijo1.jpg" />
    </li>
  </ul>

  <footer>
    <!-- Footer Optional -->
    <p>This demo is an answer to a <a href=' posted on Whosebug</a>
    </p>
    <p>bxSlider is responsive, so it usually isn't neccessary to set the dimensions on images.</p>
  </footer>

  <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.5/jquery.bxslider.js"></script>
  <script>
    $(document).ready(function() {
      var bx = $('.bxSlider').bxSlider({
        mode: 'fade',
        speed: 500, // Inc/Dec speed of fade
        pager: false,
        controls: false,
        adaptiveHeight: true, // If animated height changes not desired set to false
        adaptiveHeightSpeed: 500 //Inc/Dec speed if above option is true
      });
      $('.bx-wrapper').on('click', function(event) {
        event.preventDefault();
        bx.goToNextSlide();
      });
    });
  </script>

</body>

</html>

旧

图库没有居中，所以我为您将其居中，如果它不符合您的计划，您可以删除或注释掉 <style> 块中的那个药水。注意在 </script> 块的最后你会看到：

window.onload = init(1000, 1000);

您可以调整延迟（第一个数字）和淡入（第二个数字）时间，它们以毫秒为单位，所以现在设置为延迟 1 秒，淡入需要 1 秒才能完成。

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Gallery</title>
  <style type="text/css">
    /* Centering the gallery - Optional */
    html,
    body {
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
    }
    #ext {
      display: table;
      overflow: hidden;
      margin: 0px auto;
      height: 100%;
    }
    #imgs {
      display: table-cell;
      vertical-align: middle;
    }
    .middle {
      text-align: center;
    }
    #set img {
      display: none;
    }
  </style>
</head>

<body class="middle">
  <p>
    <img src="https://placehold.it/500x50/000/fff.png&text=HEADER" alt="guilimora" />
  </p>
  <p>&nbsp;</p>
  <p><span style="text-align: center"></span>
  </p>
  <main id="ext">
    <section id="imgs">
      <div id="set">
        <img id="i1" src="https://placehold.it/500x281/000/fff.png&text=FIRST" />
        <img id="i2" src="https://placehold.it/500x281/048/Fee.png&text=SECOND" />
        <img id="i3" src="https://placehold.it/500x281/fa8/375.png&text=THIRD" />
        <img id="i4" src="https://placehold.it/500x281/9a7/a10.png&text=FOURTH" />
        <img id="i5" src="https://placehold.it/500x281/fd3/b0d.png&text=FIFTH" />
        <img id="i6" src="https://placehold.it/500x281/fff/000.png&text=LAST" />
      </div>
    </section>
  </main>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
  <script type="text/javascript">
    var spd = 1000;
    $(document).ready(function() {
      var init = $('#set img:first-child'),
        set = $('#set img');

      init.one('load', function() {
        $(this).fadeIn(spd);
      });
      set.click(function(spd) {
        var imgs = set.size();
        var fwd = $(this).next();
        fwd = fwd.index() == -1 ? init : fwd;
        $(this).fadeOut(spd - 250);
        setTimeout(fwd.fadeIn(spd), 250);
      });
    });
  </script>


</body>

隐藏 div 直到完全加载并在 js onclick 滑块上添加淡入淡出效果

hiding div until fully loaded and adding fade effect on js onclick slider

javascript

image

fade

更新

旧