Question

我正在尝试制作一个图像滑块，通过点击上方的拇指我得到该图像的src并将其附加到div，我想将其显示为大图像，它附加到该div但我想要追加并淡入，当我点击新图像时，前一个应该淡出。我怎样才能做到这一点？

图片滑块：

Image slider

 <div id='main'>
        <div class="thumbsImg">
            <ul class="ulthumbs">
                <li>
                    <img src="img/a1.jpg" width='150' height="80">
                </li>
                    <li>
                        <img src="img/a2.jpg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a3.jpeg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a4.jpg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a5.png" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a6.jpg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a7.jpg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a8.jpg" width='150' height="80">
                    </li>
                    <li>
                        <img src="img/a9.jpg" width='150' height="80">
                    </li>
            </ul>
        </div>            
        <div id='imgBody'></div>
    </div>

CSS

.thumbsImg {
  margin-left: auto;
  margin-right: auto;   
  width: 100%;
  overflow-x: auto;
  }

ul.ulthumbs {
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}
ul.ulthumbs li {
  display: inline-block;
  cursor: pointer;
}

#imgBody{
    overflow: hidden;
    margin-top: 15px;
    width: 100%;
    height: 70%;
    background-color: pink;

}

JS

  $(document).ready(function (){

    $('.ulthumbs li img').on('click', function(){


       $('#imgBody').html('');
       var imgSrc = $(this).attr('src');

       var img = "<img src='"+imgSrc+"' width='100%' height='auto'>";

       $('#imgBody').append(img);


    });

});

Answer 1

您可以编辑您的JQuery代码以使用fadeOut()＆amp; fadeIn函数。

Read about it here

$('.ulthumbs li img').on('click', function(){
  $( "#imgBody" ).fadeOut( "slow" );
   $('#imgBody').html('');
   var imgSrc = $(this).attr('src');
   var img = "<img src='"+imgSrc+"' width='100%' height='auto'>";
   $( "#imgBody" ).fadeIn( "slow" );
   $('#imgBody').append(img);
});

检查Codepen

您也可以添加自己的淡入/淡出时间。

Answer 2

抱歉没有在JQuery中提供这个，我根本不熟悉它;它应该直截了当地翻译＆＃34;翻译＆＃34;但是，它。

这里的想法是，不是在每次点击时向img元素添加新的#imgBody元素，而是以＆＃34;空＆＃34;开头。 placholder图片已就位，其opacity设置为0。在第一张图片上单击，src属性设置为单击图像的属性，并删除opacity的类设置。然后，在每次后续图片点击中，添加设置opacity的课程，更改src并再次删除课程。

＆＃13;

((img,wait,first)=>document.querySelector(".ulthumbs").addEventListener("click",evt=>{
  if(!wait){
    wait=1;
    if(!first)img.classList.add("hide");
    setTimeout(()=>{
      img.src=evt.target.src;
      img.classList.remove("hide");
      setTimeout(()=>first=wait=0,first?0:500);
    },first?0:500);
  }
},0))(document.querySelector("#imgBody>img"),0,1);

＆＃13;

.thumbsImg{
  margin:0 auto;
  overflow-x:auto;
  width:100%;
}
ul.ulthumbs{
  list-style:none;
  margin:0;
  padding:0;
  white-space:nowrap;
}
ul.ulthumbs>li{
  cursor:pointer;
  display:inline-block;
}
#imgBody {
  background:pink;
  margin-top:15px;
  overflow:hidden;
  width:100%;
}
#imgBody>img{
  height:auto;
  transition:opacity .5s;
  width:auto;
  max-width:100%;
}
#imgBody>img.hide{
  opacity:0;
}

＆＃13;

<div id='main'>
  <div class="thumbsImg">
    <ul class="ulthumbs">
      <li><img src="https://unsplash.it/600/320?image=0" width='150' height="80"></li>
      <li><img src="https://unsplash.it/600/320?image=10" width='150' height="80"></li>
      <li><img src="https://unsplash.it/600/320?image=20" width='150' height="80"></li>
    </ul>
  </div>
  <div id="imgBody">
    <img class="hide" height="320" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="600">
  </div>
</div>

＆＃13;

如何将img附加到div并淡入

2 个答案: