嗨,这是我的图像滑块的标记。
<div role="main">
<div class="slideshow cycle-slideshow home-listings-slider" data-cycle-timeout="10000" data-cycle-auto-height="container" data-cycle-log="false" data-cycle-slides="div.slide" data-cycle-fx="scrollHorz" data-pause-on-hover="true">
<div class="cycle-prev direction"><i class="fa fa-chevron-left"></i></i></div>
<div class="cycle-next direction"><i class="fa fa-chevron-right"></i></div>
<div id="pager" class="cycle-pager"></div>
<?php
$images = get_option('homepage_images');
$image_url = get_option('siteurl').'/wp-content/uploads/slideshow/';
foreach($images as $image){ ?>
<div class="slide">
<figure>
<a href="<?php echo $image['link']; ?>" style="background-image: url(<?php echo $image_url . $image['large']; ?>)"></a>
<span class="overlay-text"><?php echo $image['text']; ?></span>
</figure>
</div>
<?php } ?>
底部有导航点的部分是这样的,(在上面的代码中也是)
<div id="pager" class="cycle-pager"></div>
系统在运行时会自动将代码填充到其中,但当它这样做时,我们会得到它。
<span class="cycle-pager-active">•</span>
div中的点真的会破坏样式,我如何使用PHP、JavaScript、HTML、CSS在前端删除它?如有任何帮助,我们将不胜感激。
干杯
Luke
要删除.cycle-pager-active
的内容,请将其添加到页面页脚的某个位置(在关闭</body>
之前即可):
<script type="text/javascript">
setTimeout( function() {
document.querySelectorAll('.cycle-pager-active').innerHtml = "";
}, 1000);
</script>
这将只针对页面中具有类cycle-pager-active
的第一个DOM元素运行。如果您有多个,并且希望清空所有,请将.querySelector
替换为.querySelectorAll
您不需要jQuery
,但如果它已经加载在页面中,您可以将脚本的内容替换为:
$(document).on('load', function(){
$('.cycle-pager-active').html('');
})
这将清空类为cycle-pager-active
的所有元素。
这是一个简单的修复。
.cycle-pager-active {overflow: hidden;}
这绝对有效。
完整代码:
.home-listings-slider .cycle-pager span:hover,
.home-listings-slider .cycle-pager span.cycle-pager-active {
background: #fff;
overflow: hidden;
text-indent: -99px;
}