图像和子弹失去了活跃的等级

Question

我的jQuery幻灯片有4张幻灯片，当它在第一个完整周期中达到第4张幻灯片时，图像和项目符号会失去活动级别，并在第二个完整周期后恢复正常。< / p>

在我添加项目符号功能之前，我已经开始工作了。我尝试删除但仍然无法正常工作！

更新：添加html / css代码。

＆＃13;

＆＃13;

var $slide = $(".slide");
  var $caption = $(".caption");
  var $bullet = $(".bullet");
  var currentSlide = 1;
  var slideSpeed = 6000;

  function slideBg() {
    var currentImg = $(".slide.active");
    var nextImg = currentImg.next();
    var currentBullet = $(".bullet.active");
    var nextBullet = currentBullet.next();
    var currentCaption = $(".caption.active");
    var nextCap = currentCaption.next();
      if (currentSlide >= $slide.length) {
        $("#img0").addClass("active");
        currentImg.removeClass("active");
        $("#0").addClass("active");
        currentBullet.removeClass("active");
        $("#cap0").addClass("active");
        currentCaption.removeClass("active");
        currentSlide = 1;
      }
      else {
        currentImg.removeClass("active");
        nextImg.addClass("active");
        currentBullet.removeClass("active");
        nextBullet.addClass("active");
        currentCaption.removeClass("active");
        nextCap.addClass("active");
        currentSlide++;
      }
    }


var timer = function() {
  interval = setInterval(function () {
    slideBg();
  }, slideSpeed);
  }
  timer();

＆＃13;

.slide {
	height: 100%;
	width: 100%;
	position: absolute;
	z-index: 2;
	visibility: hidden!important;
	display: block!important;
  opacity: 0.5!important;
  transition: visibility 1s, opacity 1s linear!important;
}

.active {
	visibility: visible!important;
  opacity: 1!important;
	display: block!important;
}

.caption {
	z-index: 3;
	text-align: center;
	position: absolute;
	top: 38%;
	left: 15%;
	margin: 0 auto;
	width: 70%;
	display: block;
	visibility: hidden;
  opacity: 0;
  transition: visibility 1s, opacity 1s linear;
}
.bullet {
	height: 10px;
	width: 10px;
	background: #fff;
	float: left;
	border-radius: 100%;
	margin-left: 5px;
	cursor: pointer;
	transition: 0.5s;
}

.bullet.active {
	background-color: #143885;
	transform: scale(1.5);
}

.bullet:hover {
	background-color: #143885;
}

＆＃13;

<div id="slideshow" class="contentbox">
		<img src="img/bg1.jpg" id="img0" class="slide active"></img>
		<img src="img/bg2.jpg" id="img1" class="slide"></img>
		<img src="img/bg3.jpg" id="img2" class="slide"></img>
		<img src="img/bg4.jpg" id="img3" class="slide"></img>

		<div id="cap0" class="caption active">
			<h1><span>Our</span> Latest <span>event</span> is ready <span>now</span>!</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a sapien ac metus viverra suscipit. Maecenas viverra et orci eu tempor. Morbi pulvinar condimentum lorem, et luctus sapien finibus vel. Maecenas pharetra porta est, a suscipit metus sodales in. Phasellus placerat tellus vitae mollis molestie.</p>
			<button type="button" name="button">View More</button>
		</div>
		<div id="cap1" class="caption">
			<h1><span>Our</span> Second <span>event</span> is ready <span>now</span>!</h1>
			<p>Vivamus non sagittis ipsum, quis rhoncus ante. In aliquam ultrices nisi, a ultrices mi mattis ut. Nulla velit libero, tristique pretium euismod vel, euismod id justo. Pellentesque iaculis fringilla ex, ut tempor felis volutpat nec.</p>
			<button type="button" name="button">View More</button>
		</div>
		<div id="cap2" class="caption">
			<h1><span>Our</span> Third <span>event</span> is ready <span>now</span>!</h1>
			<p>Donec congue molestie auctor. Suspendisse maximus lorem id felis finibus ultrices. Curabitur eu scelerisque dui. Vivamus accumsan congue massa, et volutpat libero tincidunt vel.</p>
			<button type="button" name="button">View More</button>
		</div>
		<div id="cap3" class="caption">
			<h1><span>Our</span> Fourth <span>event</span> is ready <span>now</span>!</h1>
			<p>Morbi sit amet mauris sed mi convallis porta. Praesent urna sem, porta sed odio id, consequat convallis purus. Donec quis magna consectetur, ultrices nisi in, condimentum leo. Aliquam erat volutpat. Vivamus quam nisi,</p>
			<button type="button" name="button">View More</button>
		</div>
		<div id="bullets">
			<span id="0" class="bullet active"></span>
			<span id="1" class="bullet"></span>
			<span id="2" class="bullet"></span>
			<span id="3" class="bullet"></span>
		</div>
	</div>

＆＃13;

＆＃13;

＆＃13;