使用wordpress制作Javascript幻灯片
I'm making my first steps learning to code. I made some courses about html, css, javascript, php and MySql, and now, I decided to continue learning from the practice while I build a Wordpress child theme.
我正在学习编码的第一步。我做了一些关于html,css,javascript,php和MySql的课程,现在,我决定在构建一个Wordpress儿童主题时继续学习这个练习。
The thing is that I am building an image slideshow. And to start understanding how to make it I found this: http://www.w3schools.com/w3css/w3css_slideshow.asp.
问题是我正在构建一个图像幻灯片。并开始了解如何制作它我发现了这个:http://www.w3schools.com/w3css/w3css_slideshow.asp。
It's a simple and useful slideshow. It's really nice! But there are some problems if I want to implement it in Wordpress.
这是一个简单实用的幻灯片。这太好了!但是如果我想在Wordpress中实现它有一些问题。
I made a post type and using the Advanced Custom Fields plugin I created a Repeater Field. So that code would be something like this in Wordpress:
我做了一个帖子类型并使用高级自定义字段插件我创建了一个Repeater字段。所以在Wordpress中代码就像这样:
<?php get_header(); ?>
<script>
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<?php
if( have_rows('image') ):
while ( have_rows('image') ) : the_row();
if( get_sub_field('subimage') ) :
echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
endif;
endwhile;
endif;
?>
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>
</div>
<?php get_footer(); ?>
It works almost perfect! But now I have two problems:
它几乎完美!但现在我有两个问题:
1) Once I load my page to see the template. I see the first image overlaying the last image. I don't know why:
1)一旦我加载页面以查看模板。我看到第一张图片覆盖了最后一张图片。我不知道为什么:
2) At the end of the slideshow there is an empty slide. It looks like I have an empty subfield but no, I don't have empty subfields. I don't know why there is an empty slide.
2)在幻灯片放映结束时,有一张空幻灯片。看起来我有一个空的子字段,但没有,我没有空的子字段。我不知道为什么有一张空幻灯片。
Do you have some recommendation?
你有什么建议吗?
Thank you
1 个解决方案
#1
2
I think the problem is the last closing DIV </div>
just before your get_footer()
. It's a simple html markup error that causes the browser to fail. Your code should look like this:
我认为问题是你的get_footer()之前的最后一个结束DIV 。这是一个简单的html标记错误导致浏览器失败。您的代码应如下所示:
<?php get_header(); ?>
<script>
var slideIndex = 1;
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex-1].style.display = "block";
}
</script>
<?php
if( have_rows('image') ):
while ( have_rows('image') ) : the_row();
if( get_sub_field('subimage') ) :
echo '<div class="mySlides">' . get_sub_field('subimage') . '</div>';
endif;
endwhile;
endif;
?>
<a class="home-btn-left" onclick="plusDivs(-1)">❮</a>
<a class="home-btn-right" onclick="plusDivs(1)">❯</a>
<script>
showDivs(slideIndex);
</script>
<?php get_footer(); ?>
Please let me know if this doesn't fix your problem.
如果这不能解决您的问题,请告诉我。
更多相关文章
- 如何使用jQuery将输入值插入更多填充的字段?
- HTML Select字段通过ajax调用Web服务
- 阻止用户在表单字段中输入
- CORS错误:请求标头字段预检响应中的Access-Control-Allow-Headers
- 如何在选择单选按钮时显示文本字段
- 将输入文本字段显示为纯文本
- 在用户将'n'粘贴复制到文本字段后,如何更新视图模型?
- 带有无线电的JavaScript条件字段不起作用
- 如何在onchange()事件后调用的方法中将焦点设置为输入字段?