Owl JS 计算项目的轮播问题

Question

我有这个包含 4 张图片的照片库，我有 2 个 JS 变量，分别是 "Field"（图片的当前数量）和 "Total"（图片的总数）

问题是 "total" 显示了 8 张图片，实际上是 4 张。

谁能解释为什么变量重复计算？

有我的代码：

/*Counting the number of images*/

    $(document).ready(function(){
   
// counting the number of classes named .item
   var total = $(".item").length;
   document.getElementById("total").innerHTML = total;
    
});

    
    var value = 0;
    var total = $(".item").length;
    
    
    
    
    /*Add function*/
    function add() {
        value++;
        document.getElementById("field").innerHTML = value;
        cdn();
    }
    
    /*minus function*/
    function minus() {
        value--;
        document.getElementById("field").innerHTML = value;
        cdn();
    }
    
    /*condition to start over from 0*/
    function cdn(){
        if(value>total){
            value = 1;
           
            document.getElementById("field").innerHTML = value;
        }
    
        if(value<1){
            value = total ;
            document.getElementById("field").innerHTML = value;
        }
    }

/*Owl caroussel JS*/
  var owl = $('.owl-carousel');
    owl.owlCarousel({
    nav: false,
    margin: 20,
    

    center: true,
    items:2,
    loop:true,
    dots: false,
    
    
    startPosition: 'URLHash',
    URLhashListener:true,
    responsive:{
        600:{
            items:2
        }
    }
});



// trigger go to next item on your own next navigation button:

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');
    
})

// trigger go to the previous item:

$('.customPrevBtn').click(function() {
    owl.trigger('prev.owl.carousel', [300]);
})

.item {
  width: 700px;
  height: 500px;
 /* background-color: orange;*/
  padding: 10px 40px 10px 10px;
}

.item  img{
  width: 100%;
  height: 100%;

}

#container{
  width: 100%;
  height: 900px;
  margin-right: auto;
  margin-left: auto;
  background-color: black;
  padding-bottom: 20px;
}


#place{
    width: 100%;
    height: 700px;
    background-color: black;
    position: relative;
}


.photo_place {
    width: 550px;
    padding-top: 50px;
    margin-right: auto;
    margin-left: auto;

}

.photo_place p {
    font-size: 50px;
    color: white;
    
}

#place_list {
    padding-top: 30px;
    margin-right: auto;
    margin-left: auto;
    width: 983px;
}

#place_list ul li {
    display: inline-block;
    color: white;
    font-size: 15px;
    margin-right: 11px;
}

.li_active{
    color: #a98623 !important;
    text-decoration: none;
}

#place_list ul li a {
    text-decoration: none;
    color: white;
}

.owl-nav button{
        display: block;
       
    } 

.owl-nav button:focus {
        outline:0;
    } 

.owl-nav {
        color: white;
        font-size: 25px;
        
    } 

  .owl-nav {
        color: white;
        font-size: 30px;
        
    } 

    .owl-nav .owl-next span{
        
      margin-left: 30px;
      
    } 

   .owl-nav .owl-prev span{
        
        margin-right: 30px;
      } 

#nav {
    width: 206px;
    height: 27px;
    
    
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
}

#nav a {
    width: 50px;
    height: 50px;
    color: white;
    font-size: 30px;
    float: left;
    
}

#field{
    float:left;
    
    color: white;
    position: absolute;
    font-size: 25px;
    top: 108%;
    left: 45%;

}

#total{
    float: left;
    margin-left: 20px;
    position: absolute;
    color: white;
    font-size: 25px;
    top: 110%;
    left: 45%;
}

#total:before{
    
    content :' [=12=]2F ';
    
}

#nav a:hover {
    text-decoration: none;
}

#nav .customPrevBtn{

margin-right: 30px;
float:left;

}

#nav .customNextBtn{
    margin-left: 30px;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!--BS CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!--BS JS-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


  <!--OWL CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

</head>

<body>
  <div id="container">
      <div id="place">
          <div class="photo_place">
                  <p>Galerie Photo & Vidéo</p>
          </div>

    


    <div class="owl-carousel owl-theme">
        
            <div class="item">
                <img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
            </div>

            <div class="item">
                <img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
            </div>

            <div class="item">
                <img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
            </div>

            <div class="item">
                    <img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
                </div>

           
    </div>
    <div id="nav">
             <a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>   
             <span id="field">1</span>
             <span id="total"></span>
             <a class="customNextBtn" href="javascript:add();"> ⟶ </a>   
     </div>       
  
             
  <!--OWL JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

谢谢大家。

Answer 1

我在看你的代码，对我有用的是计算 $(document).ready 中的孩子。看看这个。

   // counting the number of classes named .item
   var total = $(".item").length;
   document.getElementById("total").innerHTML = total;
    
    var value = 0;
    var total = $(".item").length;

    /*Add function*/
    function add() {
        value++;
        document.getElementById("field").innerHTML = value;
        cdn();
    }
    
    /*minus function*/
    function minus() {
        value--;
        document.getElementById("field").innerHTML = value;
        cdn();
    }
    
    /*condition to start over from 0*/
    function cdn(){
        if(value>total){
            value = 1;               
            document.getElementById("field").innerHTML = value;
        }
    
        if(value<1){
            value = total ;
            document.getElementById("field").innerHTML = value;
        }
    }

/*Owl caroussel JS*/
  var owl = $('.owl-carousel');
    owl.owlCarousel({
    nav: false,
    margin: 20,
    center: true,
    items:2,
    loop:true,
    dots: false,
    startPosition: 'URLHash',
    URLhashListener:true,
    responsive:{
        600:{
            items:2
        }
    }
});

// trigger go to next item on your own next navigation button:

$('.customNextBtn').click(function() {
    owl.trigger('next.owl.carousel');        
})

// trigger go to the previous item:

$('.customPrevBtn').click(function() {
    owl.trigger('prev.owl.carousel', [300]);
})

.item {
  width: 700px;
  height: 500px;
 /* background-color: orange;*/
  padding: 10px 40px 10px 10px;
}

.item  img{
  width: 100%;
  height: 100%;
}

#container{
  width: 100%;
  height: 900px;
  margin-right: auto;
  margin-left: auto;
  background-color: black;
  padding-bottom: 20px;
}
#place{
    width: 100%;
    height: 700px;
    background-color: black;
    position: relative;
}
.photo_place {
    width: 550px;
    padding-top: 50px;
    margin-right: auto;
    margin-left: auto;
}

.photo_place p {
    font-size: 50px;
    color: white;        
}

#place_list {
    padding-top: 30px;
    margin-right: auto;
    margin-left: auto;
    width: 983px;
}

#place_list ul li {
    display: inline-block;
    color: white;
    font-size: 15px;
    margin-right: 11px;
}

.li_active{
    color: #a98623 !important;
    text-decoration: none;
}

#place_list ul li a {
    text-decoration: none;
    color: white;
}

.owl-nav button{
        display: block;
       
    } 

.owl-nav button:focus {
        outline:0;
    } 

.owl-nav {
        color: white;
        font-size: 25px;
        
    } 

  .owl-nav {
        color: white;
        font-size: 30px;            
    } 

    .owl-nav .owl-next span{            
      margin-left: 30px;          
    } 

   .owl-nav .owl-prev span{            
        margin-right: 30px;
      } 

#nav {
    width: 206px;
    height: 27px;
    
    
    margin-top: 60px;
    margin-right: auto;
    margin-left: auto;
}

#nav a {
    width: 50px;
    height: 50px;
    color: white;
    font-size: 30px;
    float: left;        
}

#field{
    float:left;        
    color: white;
    position: absolute;
    font-size: 25px;
    top: 108%;
    left: 45%;
}

#total{
    float: left;
    margin-left: 20px;
    position: absolute;
    color: white;
    font-size: 25px;
    top: 110%;
    left: 45%;
}

#total:before{        
    content :' [=11=]2F ';        
}

#nav a:hover {
    text-decoration: none;
}

#nav .customPrevBtn{
margin-right: 30px;
float:left;
}

#nav .customNextBtn{
    margin-left: 30px;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <!--BS CSS-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <!--BS JS-->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

  <!--OWL CSS-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">

</head>

<body>
  <div id="container">
      <div id="place">
          <div class="photo_place">
                  <p>Galerie Photo & Vidéo</p>
          </div>

    <div class="owl-carousel owl-theme">
        
            <div class="item">
                <img src="https://images.homedepot-static.com/productImages/612ae505-9daf-45c3-ac16-67f97dcb251d/svn/globalrose-flower-bouquets-prime-100-red-roses-64_1000.jpg" >
            </div>

            <div class="item">
                <img src="https://cdn2.stylecraze.com/wp-content/uploads/2013/07/366_Top-25-Most-Beautiful-Yellow-Flowers_147529007.jpg_1.jpg" >
            </div>

            <div class="item">
                <img src="https://images.pexels.com/photos/133464/pexels-photo-133464.jpeg?auto=compress&cs=tinysrgb&h=350" >
            </div>

            <div class="item">
                    <img src="http://www.silkflowerwedding.com/weddingflorist/prodimages/Black%20Flower%20Hair%20Clip%20481.jpg" >
                </div>
           
    </div>
    <div id="nav">
             <a class="customPrevBtn" href="javascript:minus();"> ⟵ </a>   
             <span id="field">1</span>
             <span id="total"></span>
             <a class="customNextBtn" href="javascript:add();"> ⟶ </a>   
     </div>       
             
  <!--OWL JS-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

Owl JS 计算项目的轮播问题

Owl carousel issue on JS counting the items

html

javascript

owl-carousel