小贝子编程

猫头鹰轮播问题在JS上计算项目



我有这个包含 4 张图像的照片库，我有 2 个 JS 变量，它们是"字段"(图像的当前数量(和"总计"(图像的总数(

问题是"总计"显示 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 :' 02F ';

}
#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>

谢谢大家。

我正在寻找您的代码，对我有用的是计算$(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 :' 02F ';        
}
#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>

相关内容

  • 没有找到相关文章

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium