堆棧內存溢出
  簡體   English   中英

jQuery移動滑動工作，但不能正確順序更改圖像

[英]Jquery mobile swipe working but not changing image proper sequentially

 原文  2017-10-08 17:52:00  4   1    javascript/ jquery/ html/ css

問題描述

我的移動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、2rd，3rd並沒有正常顯示。幫助我

1 個解決方案

解決方案1
 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')
        }

        });

});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用Jquery mobile在圖片上滑動 Android 4.2.2中的Jquery Mobile滑動事件無法正常工作 目標上的圖片滑動不適用於jQuery Mobile jQuery Mobile pagecontainer更改無法滑動 使用Jquery或Jquery Mobile中的左側滑動向左旋轉圖像 Jquery移動刷卡 jQuery移動滑動功能 更改方向后調整jQuery移動圖像的大小 jQuery Mobile動態更改CSS中的背景不起作用 jQuery在手機上向左或向右滑動
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM