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);

<script>タグでjavascriptを定義する必要があります。

間違ったケース:

<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 に答える