Javascript 我能'；我的视差幻灯片无法使用jquery默认设置_Javascript_Jquery_Html_Css_Slideshow

Javascript 我能'；我的视差幻灯片无法使用jquery默认设置

javascript jquery html css

Javascript 我能'；我的视差幻灯片无法使用jquery默认设置,javascript,jquery,html,css,slideshow,Javascript,Jquery,Html,Css,Slideshow,-编辑- 在经历了一小时又一小时的在线html/css/js课程、youtube视频、浏览stackoverflow、在记事本++中无休止的劳作之后，我已经完成了！总而言之，这非常接近预期的结果。然而，仍然存在一些小障碍： 1）阿贾克斯。我无法通过Ajax实现从索引到导航页面的初始转换。我试着按照w3schools的例子所说的去做，但没有效果。当前情况有点不稳定，但可以接受（将当前页面不透明度从1更改为0，白色闪烁，加载新页面背景颜色，加载新页面背景图像，加载新页面背景图像/rest，

-编辑-

在经历了一小时又一小时的在线html/css/js课程、youtube视频、浏览stackoverflow、在记事本++中无休止的劳作之后，我已经完成了！

总而言之，这非常接近预期的结果。然而，仍然存在一些小障碍：
1）阿贾克斯。我无法通过Ajax实现从索引到导航页面的初始转换。我试着按照w3schools的例子所说的去做，但没有效果。当前情况有点不稳定，但可以接受（将当前页面不透明度从1更改为0，白色闪烁，加载新页面背景颜色，加载新页面背景图像，加载新页面背景图像/rest，将不透明度从0更改为1）。我希望通过AJAX实现的目标：
-单击导航页面的链接
-防止默认/停留在当前页面并等待
-加载/呈现下一页
-下一页完全加载/呈现后，开始将当前页的不透明度从1更改为0
-同时开始将下一页的不透明度从0更改为1
-完成这些动画后，卸载第一页
我已尝试搜索此功能，但在任何地方都找不到描述…
2）内容幻灯片垂直缩进。一旦内容幻灯片滑到屏幕上，文本向下缩进约5%。将contentpage divs positions更改为“fixed”似乎是唯一的修复方法，但如果使用“position:fixed”，页面将变得不可滚动，这是不需要的。
3）谷歌地图在“联系”部分。 “联系人”部分中的谷歌地图有时无法加载，只能在页面刷新后加载。这可能是由于我的免费网络主机，我使用它进行页面测试…但可能是在JS中？我通过在html文件中的API键中添加“async defer”使其通过外部JS文件工作。
4）不透明度动画。“.animate（{opacity:0.3}，{queue:false，duration:'slow'}）；”仅在与'slow'一起使用时有效。当我给它赋值时，比如说“500”，它就会断开。它将更改不透明度，但一旦动画完成，不透明度将立即返回到初始值，并保持不变。因此，当再次激活动画时，无论单击什么，不透明度都为并保持为1

-编辑-

我已经开始制作一个移动网站，并且已经确定了页面转换的“视差幻灯片”。以下是我的JSFIDLE：

正如您所看到的，我的默认设置不起作用，即使没有显示任何错误。我已经尝试将它应用于所有已知的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>






第1页，lorem ipsum dolor sit amet等。


第二页


第三页


第4页


src=“js/parallaxscript.js”

非常感谢您的帮助

编辑：

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

AJAX的基本级别如下所示：

AJAX是一种将新内容引入页面而无需重新加载的方法这一页
当您不想重新加载页面时，应使用AJAX；但是，你必须与服务器通信

要从索引页导航到导航页，有两条路线可供选择

使用链接。一个简单的html

。请注意，这是一个实验性的css属性。基本的支持看起来并没有那么糟糕；但是，一定要小心使用它
我相信您的问题的确切原因是您使用了背景位置。由于您设置了“宽度”和“高度”值，因此我认为它将滚动位置设置为屏幕顶部。

老实说，你如何设置你的幻灯片是非常复杂和非常僵硬的
我建议在数据中引入更多的JavaScript和异步加载。为了引入异步，您需要一个服务器。您不需要购买，您可以设置免费的本地开发服务器。本质上，它是一个只能在本地访问的web服务器
异步幻灯片放映本质上是根据需要获取幻灯片
E.X：
载玻片1
用户单击下一步按钮。从服务器获取幻灯片2
从服务器收到幻灯片2，请删除幻灯片1并显示幻灯片2
用户单击下一步按钮。从服务器获取幻灯片3
从服务器收到幻灯片3，删除幻灯片2并显示幻灯片3
用户单击“上一步”按钮。从服务器获取幻灯片2
从服务器收到幻灯片2，删除幻灯片3并显示幻灯片2
正如您在本例中看到的，每当用户单击“下一步”或“上一步”按钮时，网站都会要求服务器提供相应的幻灯片。一旦网站从服务器获得幻灯片，它将用新幻灯片替换当前幻灯片
注意，这是一个异步幻灯片。不会在用户每次单击“下一步”或“上一步”按钮时重新加载页面。只有幻灯片是reloa