Jquery移动滑动工作，但不能按顺序正确更改图像

Question

我的移动jquery图像滑动工作正常，但无法按顺序维护。滑动图像时，第三张图像排在第二位，第二张图像排在第三位。

在下面找到我的代码

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
  <div class="container-fluid">
    <div class="col-md-12">
      <div class="row">
         <div class="gal">
             <div class="grid">    
                <a data-toggle="modal" data-target=".bd-example-modal-lg">
                   <img class="zoom" src="https://preview.ibb.co/i0PmHk/1.jpg" alt="">
                 </a>
               </div>
             <div class="grid">
                 <a data-toggle="modal" data-target=".bd-example-modal-lg">
                   <img class="zoom" src="https://preview.ibb.co/mysOxk/3.jpg" alt="">
                 </a>
              </div>
              <div class="grid">
                 <a data-toggle="modal" data-target=".bd-example-modal-lg">
                    <img class="zoom" src="https://i1.wp.com/demo.wpzoom.com/indigo/files/2013/04/volterman-smart-wallet-10.jpg?w=790&h=527&crop" alt="">
                 </a>  
               </div>
            <!--Images modal-->
               <div class="modal fade bd-example-modal-lg"  role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                  <div class="modal-dialog modal-lg">
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                        </button>
                    <div class="modal-content">
                                        <!--image viewer-->
                      <div class="row">
                    <!---Prev Button-->
                        <div class="col-1">
                            <a class="buttons_prev" href="#">
                              <i class="fa fa-angle-left fa-3x"></i>
                            </a> 
                         </div>
                          <!---next button-->    
                          <div class="col-1">
                              <a class="buttons_next" href="#">
                                <i class="fa fa-angle-right fa-3x"></i>
                              </a>
                          </div>
                        </div>
                        <!--- Image show-->
                         <div class="col-12">
                           <div class="image_post">
                            <ul align="center">
                               <li >
                                <img src="https://preview.ibb.co/i0PmHk/1.jpg"/>
                              <!--image wise details-->
                                 <div class="col-12">
                                   <h2 class="text-left">This is headingA</h2>
                                   <h2 class="text-left">This is headingB</h2>
                                    <p class="text-left">
                                      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
                                    </p>
                                 </div> 
                                </li>  
                              <li>
                                <img src="https://preview.ibb.co/mysOxk/3.jpg"/>
                              <!--image wise details-->
                                 <div class="col-12">
                                   <h2 class="text-left">This is headingA</h2>
                                   <h2 class="text-left">This is headingB</h2>
                                    <p class="text-left">
                                      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
                                    </p>
                                 </div> 
                                </li> 
                            <li>
                                <img src="https://i1.wp.com/demo.wpzoom.com/indigo/files/2013/04/volterman-smart-wallet-10.jpg?w=790&h=527&crop"/>
                              <!--image wise details-->
                                 <div class="col-12">
                                   <h2 class="text-left">This is headingA</h2>
                                   <h2 class="text-left">This is headingB</h2>
                                    <p class="text-left">
                                      standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type 
                                    </p>
                                 </div> 
                                </li> 

                             </ul>

                           </div> 
                            <!--image counter-->
                         <div align="center" class="slide_image_counter text-center">
                             <a></a>
                        </div> 
                    </div>
                      <!--Image viewer-->  
                    </div>
                  </div>
                </div>
            <!--Images modal-->
        </div>
      </div>
    </div>
  </div>

.CSS

.gal {
  -webkit-column-count: 3;
     -moz-column-count: 3;
          column-count: 3;
          display: block;
          overflow: hidden;
}
.grid {
          overflow: hidden; 
          margin-bottom: 15px;
}
.zoom {
          cursor: pointer;
          transition: all .5s ease;
          transform-origin: center;
  -webkit-backface-visibility: hidden;
}
.grid:hover .zoom {
          transform: scale(1.2);
}
.gal img {
          width: 100%;
          padding: 0;
}
@media (max-width: 500px) {
      .gal {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
      }
}
.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
  background-color:rgba(0, 0, 0,0.98);
  width: 100%;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: transparent;
  margin: auto;
  padding: 0;
  width: 100%;

}
/* The Close Button */
.close {
  color: white;
  position: absolute;
  margin-top:  -30px;
  right: -180px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
/*image like menu*/
.image_post ul {
    list-style-type: none;
}
.image_post ul li img{
    width:100%;
    height:400px;
}
.image_post ul li{
    list-style-type: none;
    position: relative;
    display: none;
}
.image_post ul li.activepostimg{
    list-style-type: none;
    position: relative;
    display: block;
}
/*image like menu*/
.buttons_prev,
.buttons_prev:hover
{
    color: white;
    text-decoration: none;
}
.buttons_next,
.buttons_next:hover
{
    color: white;
    text-decoration: none;
}
.buttons_prev i{
    margin-top: 20vh;
}
.buttons_next i{
    margin-top: 20vh;
}
.activepostimg h2{
    color: white;
    font-size: 18px;
    font-weight: 300;
}
.activepostimg h2:nth-of-type(1){
    padding-top: 60px;
}
.activepostimg p{
    color: white;
    font-weight: 200;
}
.slide_image_counter{
    margin-top:-170px;
    color: white;
}
.slide_image_counter a{
    background-color:rgba(115, 115, 115, 0.5);
    color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 12px;
    font-size: 12px;
}
 .modal-lg {
    max-width: 900px;
  }

.JS

$(document).ready(function(){
var totalItems = $('.image_post li').length, currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
//code for opening image
$('.grid img').on('click', function() {
    currentIndex = $('.grid img').index(this) + 1;
    $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
    $(".image_post li").removeClass("activepostimg");
    $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
});
//code for next image  
$('.buttons_next').on('click', function() {
    if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
        currentIndex++;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
    } else {
        currentIndex = 1;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});
//code for previous
$('.buttons_prev').on('click', function() {
    if ($('.image_post li.activepostimg').index() > 0) {
            currentIndex--;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
    } else {
        currentIndex = $('.image_post li').length;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});
//swipe
        $("li").swiperight(function() {  
        if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
        currentIndex++;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
        } else {
        currentIndex = 1;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
        }
        });
        $("li").swipeleft(function() {  
        if ($('.image_post li.activepostimg').index() > 0) {
        currentIndex--;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
        } else {
        currentIndex = $('.image_post li').length;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
        }
        });
});

一切正常，但第三张图像是在滑动第一张图像后出现的。第 1 张第 2 张第 3 张图像没有正确主图像。帮帮我

Answer 1

代码应该是这样的

$(document).ready(function(){
var totalItems = $('.image_post li').length, currentIndex = 1;
$('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
//code for opening image
$('.grid img').on('click', function() {
    currentIndex = $('.grid img').index(this) + 1;
    $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
    $(".image_post li").removeClass("activepostimg");
    $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
});
//code for next image  
$('.buttons_next').on('click', function() {
    if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
        currentIndex++;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
    } else {
        currentIndex = 1;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});
//code for previous
$('.buttons_prev').on('click', function() {
    if ($('.image_post li.activepostimg').index() > 0) {
            currentIndex--;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
    } else {
        currentIndex = $('.image_post li').length;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
    }
});
//swipe
        $("li").swiperight(function() {  
        if ($('.image_post li.activepostimg').index() > 0) {
        currentIndex--;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').prev('.image_post li').addClass('activepostimg');
        } else {
        currentIndex = $('.image_post li').length;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
        }
        });
        $("li").swipeleft(function() { 
        if($('.image_post li.activepostimg').index() < ($('.image_post li').length - 1)){
        currentIndex++;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $('.activepostimg').removeClass('activepostimg').next('.image_post li').addClass('activepostimg');  
        } else {
        currentIndex = 1;
        $('.slide_image_counter a').html('' + currentIndex + '/' + totalItems + '');
        $(".image_post li").removeClass("activepostimg");
        $('.image_post li').eq(currentIndex - 1).addClass('activepostimg')
        }
        });
});