基于JQuery的全宽响应图像滑块已损坏

JQuery based Full Width Responsive Image Slider corrupt?

本文关键字：图像 已损坏 响应 JQuery 基于      更新时间：2023-09-26

因此，我正在JQuery中开发我的第一个响应式全宽图像滑块。我以前一直在使用JQuery，但从未使用过图像滑块，所以我不确定是我的代码损坏了，还是循环2在和我玩游戏。

所以我遇到的问题是，当我打开网页看到滑块本身时，它并没有显示图片。我反对cycle2文件过时或其他什么的想法，但我不能确定，除非经常使用它的人能够确认它。

对我来说，我的代码看起来很完美，我找不到任何问题，因为它是一个很短的代码。

以下是我的问题https://i.stack.imgur.com/xNTjZ.jpg

这是我的文件的源代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script type="text/javascript src="C:'Users'user'Desktop'Development'Full Width Slider Varga'js'jquery.js"></script>
<script type="text/javascript src="C:'Users'user'Desktop'Development'Full Width Slider Varga'js'jquery.cycle2.min.js"></script>
</head>

<body>
    <div class="cycle-slideshow">
        <img src="C:'Users'User'Desktop'Development'Full WIdth Slider Varga'images'Untitled.png">
        <img src="C:'Users'User'Desktop'Development'Full WIdth Slider Varga'images'wp.png">
        <img src="C:'Users'User'Desktop'Development'Full WIdth Slider Varga'images'wp2.png">
 </div>
</body>
</html>

试试这个代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full Width Responsive Image Slider</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
  <div class="cycle-slideshow">
    <img src="images/Untitled.png">
    <img src="images/wp.png">
    <img src="images/wp2.png">
  </div>
</body>
</html>

https://jsfiddle.net/1qjgwz31/

相关文章：