0

我一直在寻找 jquery 移动图像幻灯片，发现这个链接很有趣https://github.com/blackdynamo/jQuery-Mobile-Carousel我已经下载了所有的 js 文件并插入了它。但它仍然无法正常工作.. 请在下面找到代码。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Home</title>
<!-- Meta viewport tag is to adjust to all Mobile screen Resolutions-->
<meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1" />

<link rel="stylesheet" type="text/css" href="Css/style.css" />
<link rel="stylesheet" type="text/css" href="Css/Jstyle.css" />
<link rel="stylesheet" type="text/css" href="Css/pag.css" />
<script type="text/javascript" src="Javascript/jquery1.js"></script>
<script type="text/javascript" src="Javascript/jquery2.js"></script>

<script type="text/javascript" src="Css/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="Css/jquery.mobile.carousel.js" ></script>
<script type="text/javascript" src="Css/jquery.ui.ipad.js" ></script>



<script type="text/javascript" src="css/pag.js"></script>
<script type="text/javascript">

(function($) {
    $("#carousel1").carousel();
})(jQuery);

</script>



</head>
<body>


<div data-role="page">
Horizontal
<div style="height: 300px; width: 500px">
    <ul data-role="listview" id="carousel1" style="display: none;">
        <li><div style="width: 100%; height: 100%; background-color:blue;">Page 1</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#837;">Page 2</div></li>
        <li><div style="width: 100%; height: 100%; background-color:#999;">Page 3</div></li>

    </ul>
</div>

</div>


</body>
</html>
4

1 回答 1

1

下面的链接是github。

https://github.com/blackdynamo/jQuery-Mobile-Carousel

实际上jquery.mobile.carousel.js是幻灯片效果的库文件。

但这个库使用 jQuery UI 的可拖动功能并模拟鼠标事件的触摸。

所以，如果你想使用这个库。您应该在 html 中包含所有 js 文件。

添加

以下部分是错误的

   <body onload=(function($) {
       $("#carousel1").carousel();

   })(jQuery);>

修复如下

(function($) {
    $("#carousel1").carousel();
})(jQuery);

并且 javascript 应该在 <script> 标记中定义。

错误案例：

<link rel="stylesheet" type="text/css" href="Css/jquery-ui-1.8.7.custom.min.js" />
<link rel="stylesheet" type="text/css" href="Css/jquery.mobile.carousel.js" />
<link rel="stylesheet" type="text/css" href="Css/jquery.ui.ipad.js" />

正确的案例：

<script type="text/javascript" src="Css/jquery-ui-1.8.7.custom.min.js" />
<script type="text/javascript" src="Css/jquery.mobile.carousel.js" />
<script type="text/javascript" src="Css/jquery.ui.ipad.js" />
于 2013-02-14T07:14:03.897 回答