Question

- 编辑 -

经过几个小时的在线html / css / js课程，youtube vids，浏览stackoverflow，在记事本++中无休止地工作，以及什么不是，我已经完成了！ https://studiodevana.000webhostapp.com/index.html

总而言之，它非常接近预期的结果。但是，仍然存在一些小绊脚石：
1）AJAX。我无法从索引到导航页面进行初始转换以通过Ajax工作。尝试做w3schools的例子说，但无济于事。目前的情况有点不稳定，但可以接受（将当前页面不透明度从1更改为0，白色闪存，加载新页面背景颜色，加载新页面背景图像，加载新页面背景图像/休息，将不透明度从0更改为1）。我想通过AJAX实现的目标：
- 点击导航页面的链接
- 防止默认/停留在当前页面上并等待
-load / render下一页
-once下一页完全加载/渲染，开始将当前页面的不透明度从1改为0 -SIMULTANELYLY开始将下一页的不透明度从0改为1 -once这些动画完成，卸载第一页
我已尝试搜索此功能，但无法在任何地方找到说明...
2）内容幻灯片以垂直方式滑动。一旦内容幻灯片滑动到屏幕上，文本向下缩进约5％。更改内容页面将位置划分为＆＃34;固定＆＃34;似乎是唯一的解决方案，但是在＆＃34;位置：固定＆＃34;，页面变得不可滚动，这是不受欢迎的。
3）谷歌地图在＆＃34;联系＆＃34;部分。 Google地图中的＆＃34;联系人＆＃34;部分有时无法加载，只在页面刷新后加载。这可能是由于我用于页面测试的免费虚拟主机...但也许它在JS中？我通过添加＆＃34; async defer＆＃34;使其通过外部JS文件工作。到html文件中的API密钥。
4）不透明度动画。＆＃34; .animate（{opacity：0.3}，{queue：false，duration：＆＃39; slow＆＃39;}）;＆＃34;仅在与“慢”一起使用时才有效。当我为它分配一个值时，说＆＃34; 500＆＃34;，它会中断。它将改变不透明度，但一旦动画完成，不透明度将立即返回到初始值，并在那里保持。当您再次激活动画时，无论您点击什么，不透明度都会保持为1。

- 编辑 -

我已经开始制作一个移动网站，并已经确定了＃34; parallax幻灯片＆＃34;用于页面转换。这是我的傻瓜：

https://jsfiddle.net/j7bwnbwm/9/

正如您所看到的，即使没有出现错误，我的preventDefault也无法正常工作。我已经尝试将它应用于所有已知的ID，类和什么不是，但幻灯片显示一旦您单击箭头就会滚动到顶部。我希望索引页面保留其原始滚动位置或与下一个幻灯片元素类似的位置（如果它们确实链接并且表现得像一个元素，我不确定）。在网页开发方面我是一个新手，只是在5天前编写了我的第一行html，这让我整天都很头疼。我怀疑无线电按钮无法用这种方法进行定位，但我知之甚少，无法找到解决方案。

  <body>

<div class="container">

  <div class="sp-slideshow">

    <input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
    <label for="button-1" class="button-label-1"></label>

    <input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
    <label for="button-2" class="button-label-2"></label>

    <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" />
    <label for="button-3" class="button-label-3"></label>

    <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" />
    <label for="button-4" class="button-label-4"></label>

    <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" />
    <label for="button-5" class="button-label-5"></label>

    <label for="button-1" class="sp-arrow sp-a1"></label>
    <label for="button-2" class="sp-arrow sp-a2"></label>
    <label for="button-3" class="sp-arrow sp-a3"></label>
    <label for="button-4" class="sp-arrow sp-a4"></label>
    <label for="button-5" class="sp-arrow sp-a5"></label>

    <div class="sp-content">
      <div class="sp-parallax-bg"></div>
      <ul class="sp-slider clearfix">
        <li>
          <img src="https://studiodevana.000webhostapp.com/images/image1.png" width="100%" height="100%" alt="image01" />
        </li>
        <li>
          1st Page, lorem ipsum dolor sit amet, etc.
        </li>
        <li>
          2nd page
        </li>
        <li>
          3rd page
        </li>
        <li>
          4th page
        </li>
      </ul>
    </div>

  </div>

</div>

<script>
  src = "js/parallaxscript.js"

</script>

非常感谢所有帮助！

Answer 1

编辑：

您似乎误解了何时何地使用AJAX。您说您正在尝试使用AJAX从1个HTML文档导航到另一个HTML文档。这是 NOT 正确使用AJAX。

基本级别的AJAX如下：

AJAX是一种在不重新加载的情况下将新内容引入页面的方法这页纸。
当您不想重新加载页面时，应该使用AJAX;但是你必须与您的服务器通信。

要从索引页面导航到导航页面，需要选择两条路线。

使用链接。一个简单的html <a>。这将重新加载页面。
将导航和索引页面转换为幻灯片的幻灯片。如果您使用AJAX，则不应重新加载页面。

preventDefault

例如，当您点击链接时。它的默认行为是将用户发送到href属性定义的地址。

您可以在链接的点击事件中使用preventDefault来停止此行为。

可以使用background-position-x自动保持滚动位置。请注意，这是一个实验性的css属性。基本支持看起来并不那么糟糕;但是，要小心使用它。

我相信您问题的确切原因是您使用background-position。由于您设置了值width和height值，我认为它将滚动位置设置为屏幕顶部。

我建议在数据中引入更多JavaScript并可能异步加载。为了引入异步，您需要一台服务器。你不需要买一个，你可以设置免费的本地开发服务器。从本质上讲，它是一个只能在本地访问的Web服务器。

异步幻灯片显示基本上可以根据需要获取幻灯片。

E.X：

加载幻灯片1
用户点击下一步按钮。从服务器获取幻灯片2.
从服务器收到幻灯片2，摆脱幻灯片1并显示幻灯片2.
用户点击下一步按钮。从服务器获取幻灯片3.
从服务器收到幻灯片3，摆脱幻灯片2并显示幻灯片3.
用户点击上一个按钮。从服务器获取幻灯片2.
从服务器收到幻灯片2，摆脱幻灯片3并显示幻灯片2.

正如您在此示例中所看到的，每当用户点击下一个或上一个按钮时，网站都会向服务器询问相应的幻灯片。一旦网站从服务器获得幻灯片，它将用新幻灯片替换当前幻灯片。

注意，这是一个ASYNCHRONOUS幻灯片。每次用户单击下一个或上一个按钮时，都不会重新加载页面。仅重新加载幻灯片。

JQuery特别是一个异步库。您也可以使用AJAX API将其保存为纯JavaScript。

JavaScript（同步）幻灯片放映有很多方法。

您可以加载所有幻灯片并控制可见性。
您还可以在变量中保存幻灯片的内容设置幻灯片元素的innerHTML属性。
您还可以使用JavaScript更改css类来设置视差幻灯片。我个人会选择其中一个选项。每张幻灯片都有一个css类是不可维护的。

所有这些选项都具有相同的一般概念，其中JavaScript会跟踪当前幻灯片编号，并使用它来确定当用户点击上一个或下一个时要显示的幻灯片。

学习JavaScript或获取异步幻灯片的本地开发服务器可能听起来很多，而且确实如此。即使有所有的all-in-package本地开发服务器。尽管有这些工作，但它会使你的代码更易读，更容易理解。

起初可能很难;但是，一旦你获得了一些经验。您将能够回顾并了解JavaScript方式的灵活性和酷感。

我无法使用jquery preventDefault来处理我的视差幻灯片

1 个答案: