[英]dynamic slider double content displaying
我正在尝试使W3滑块动态化,原始滑块来自此链接
我想以仅显示所有底部图像且仅顶部当前图像的方式查看此链接,以便更好地理解。
用我的代码,一切都显示为两倍。
这是我的滑块代码:
<section id="slider">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Photo Gallery</h3>
<div class="section-title-divider"></div>
<div class="w3-content" style="max-width:1200px">
<?php
include("admin/db/db.php");
$select_db = "select * from gallery";
$run_events = mysql_query($select_db);
while($row=mysql_fetch_array($run_events)){
$id = $row['id'];
$image= $row['image'];
?>
<img class="mySlides" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%;height:350px;">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%" onclick="currentDiv(<?php echo $id; ?>)">
</div>
<?php }?>
</div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</div>
</div>
</div>
</section>
您需要以此替换代码,然后查看:
<section id="slider">
<div class="container wow fadeInUp">
<div class="row">
<div class="col-md-12">
<h3 class="section-title">Photo Gallery</h3>
<div class="section-title-divider"></div>
<div class="w3-content" style="max-width:1200px">
<?php
include("admin/db/db.php");
$select_db = "select * from gallery";
$run_events = mysql_query($select_db);
while($row=mysql_fetch_array($run_events)){
$id = $row['id'];
$image= $row['image'];
?>
<img class="mySlides" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%;height:350px;">
<div class="w3-row-padding w3-section">
<div class="w3-col s4">
<img class="demo w3-opacity w3-hover-opacity-off" src="admin/images/gallery/<?php echo $image; ?>" style="width:100%" onclick="currentDiv(<?php echo $id; ?>)">
</div>
</div>
<?php }?>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" w3-opacity-off", "");
}
x[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " w3-opacity-off";
}
</script>
</div>
</div>
</div>
</section>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.