Question

也许这是一个愚蠢的问题，但我对removeClass()方法

有疑问

我正在使用自动播放的幻灯片

这是我的幻灯片：

<div class="imageSlide">
  <figure>
    <img class="Introduction img-fluid"  src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2016/01/headphones-man-listening-to-music-pandora-spotify-apple-music-cur-groove-play-google.jpg">
    <figcaption class="Introduction">If you are looking for some awesome music, LovingMusic.com is for you! We have more than 50000 musics!</figcaption>
    <img class="Introduction img-fluid invisible" src="http://blog.goeventz.com/wp-content/uploads/2017/05/music-festivals.jpg">
    <figcaption class="Introduction">We have a lot of events for you!</figcaption>
    <img class="Introduction img-fluid invisible" src="https://static.pexels.com/photos/40815/youth-active-jump-happy-40815.jpeg">
    <figcaption class="Introduction">Join our community and buy musics to win the prize</figcaption>
  </figure>             
  <input type="radio" name="ImageList" class="ImageList" checked><input type="radio" name="ImageList" class="ImageList"><input type="radio" name="ImageList" class="ImageList">
</div>

这是一个幻灯片javascript脚本：

var imageIndex =0;
setInterval(imageSlide, 3000);

function imageSlide(){
  var $img =$('img.Introduction');
  var $radioBox = $('input[class="Introduction"]');
  if(imageIndex<$img.length){
    $img.addClass('invisible');
    $img.next('.invisible').removeClass('invisible');
    imageIndex = imageIndex +1;
    console.log(imageIndex);//added to check if counting and if loop works correctly
  }
  if(imageIndex == $img.length)
    imageIndex =0;
}

问题是方法removeClass()不起作用。根据我的CSS风格，

img.Introduction{
  position: relative;
  height: 40vh;
  width: 40vw;
  transition: filter 0.5s;
}

img.Introduction:hover{
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
  -ms-filter: brightness(60%);
  -moz-filter: brightness(60%);
  -o-filter: brightness(60%);   
 }

 img.invisible{
   display: none;
 }

具有Introduction类的

img标签没有任何css显示样式。但我的网络浏览器只删除第一个图像，而不显示第二个图像。为什么？

Answer 1

$(function(){
  var $images = $('img.Introduction');
  var $imageList = $('.ImageList');
  
  setInterval(function(){
    //get the one image that is visible
    var $current = $images.not('.invisible');
    //get the image at the next index, but mod for the images length so it will wrap back to 0
    var $next = $images.eq( ($images.index($current) + 1) % $images.length );
    //hide the current image
    $current.addClass('invisible');
    //show the next image
    $next.removeClass('invisible');
    //adjust the radio buttons at the bottom
    $imageList.eq($images.index($next)).prop('checked', true);
  }, 1000);
});

img.Introduction {
  position: relative;
  height: 40vh;
  width: 40vw;
  transition: filter 0.5s;
}

img.Introduction:hover {
  filter: brightness(60%);
  -webkit-filter: brightness(60%);
  -ms-filter: brightness(60%);
  -moz-filter: brightness(60%);
  -o-filter: brightness(60%);
}

img.invisible {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imageSlide">
  <figure>
    <img class="Introduction img-fluid" src="http://s3.amazonaws.com/digitaltrends-uploads-prod/2016/01/headphones-man-listening-to-music-pandora-spotify-apple-music-cur-groove-play-google.jpg">
    <figcaption class="Introduction">If you are looking for some awesome music, LovingMusic.com is for you! We have more than 50000 musics!</figcaption>
    <img class="Introduction img-fluid invisible" src="http://blog.goeventz.com/wp-content/uploads/2017/05/music-festivals.jpg">
    <figcaption class="Introduction">We have a lot of events for you!</figcaption>
    <img class="Introduction img-fluid invisible" src="https://static.pexels.com/photos/40815/youth-active-jump-happy-40815.jpeg">
    <figcaption class="Introduction">Join our community and buy musics to win the prize</figcaption>
  </figure>
  <input type="radio" name="ImageList" class="ImageList" checked><input type="radio" name="ImageList" class="ImageList"><input type="radio" name="ImageList" class="ImageList">
</div>

jQuery removeClass（）无法使用next（）

1 个答案: