Question

我试图完成图片库滑动功能。我总共有8个图像，一个div（图库）只能包含4个图像，div两侧有2个按钮（图库），可以让你点击显示下一个/前4个图像。图像路径通过php从数据库填充，滑动功能由javascript（style.display：block＆amp; style.display：none）完成。我的问题是为什么我在画廊的第二页上有4个小点？我怎么能摆脱他们？感谢帮助！这是我的图库的 html 代码：

<div class="galleryOuter">
<button class="previous" onclick="showImage(-4)"></button>
<button class="next" onclick="showImage(4)"></button>
<p class="gallery_title">Editor's Choice</p>
<?php
$array=LoadingImages();
foreach($array as $value){
echo"<div class='gallery'>";
echo"<a target='_self' href='#'>";
settype($value['album_id'],"string");
echo"<img class='album_images' src='Images/album/".$value['album_id'].".png' width='330' height='320'>";
echo"</a>";
echo"<div class='desc'>".$value['artist_name']."</div>";
echo"</div>";
} 
?>
</div>

以下是 CSS 代码：

/*Image Gallery*/
div.gallery{
display:inline-block;
margin:0px 15px 30px 15px;
border:2px solid #999999;
background-color:#fff;
}
div.desc{
font-size:20px;
padding:5px;
text-align:center;
}
div.galleryOuter{
width:101%;
height:50%;
background-color:rgba(242, 242, 242,0.3);
text-align:center;
margin-top:100px;
overflow:hidden;
margin-left:-7px;
min-width:1700px;
overflow:hidden;
}
.galleryOuter:hover{
background-color:rgba(242, 242, 242,0.4);
}
div.gallery:hover{
border:2px solid #ccc;
}
p.gallery_title{
font-size:25px;
}
/*Slider Button*/
.previous{
float:left;
height:475px;
width:50px;
background-size:30px;
background-image:url('Images/icons/leftarrow.png');
background-position:center;
background-repeat:no-repeat;
background-color:rgba(242, 242, 242,0.4);
outline:none;
border:none;
cursor:pointer;
}
.next{
float:right;
height:475px;
width:50px;
background-size:30px;
background-image:url('Images/icons/rightarrow.png');
background-position:center;
background-repeat:no-repeat;
background-color:rgba(242, 242, 242,0.4);
outline:none;
border:none;
cursor:pointer;
}
.previous:hover,.next:hover{
background-color:rgba(242, 242, 242,0.7);
}

以下是 javascript ：

function showImage(input_value){
var first_image_index=0;
var first_image_index_af=first_image_index+input_value;
var x=document.getElementsByClassName("album_images");
var y=document.getElementsByClassName("desc");
if(first_image_index_af<0){first_image_index_af=0;}
if(first_image_index_af>4){first_image_index_af=4;}
for(i=0;i<4;i++){
x[first_image_index_af+i].style.display="block";
y[first_image_index_af+i].style.display="block";
x[7-(first_image_index_af+i)].style.display="none";
y[7-(first_image_index_af+i)].style.display="none";
}
}

Answer 1

问题是解决了。正确的解决方案是在名为“画廊”的div中评论边框css。似乎style.display：none应用于边框属性将变成点。

style.display：none原来是小点

1 个答案: