[英]Image Gallery Carousel
我嘗試使用旋轉木馬FredSel畫廊。 但是當我單擊按鈕以打開時什么也沒有發生。 我選擇的畫廊是刷卡畫廊,我已經從該站點下載了庫。 我嘗試了很多東西,但沒有任何效果。
有人可以幫我嗎? 我是jQuery的新手
我不知道我做錯了什么。
這是我的代碼。
<script src="jquery.carouFredSel-6.2.0-packed.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
JAVASCRIPT:
<script>
$("#foo4").carouFredSel({
auto : false,
swipe : {
onTouch : true,
onMouse : true
}
});
</script>
HTML5
<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="footer">
<a href="#p1" data-icon="home" data-iconpos="notext">Home</a>
<h1>HOME</h1>
<a href="#foo4" data-icon="grid" data-iconpos="notext" data-inline="true" class="ui-btn-right" data-direction="reverse" style="margin-right:70px">GALLERY</a>
</div>
<div id="image_carousel">
<div id="foo4">
<img src="images/small/1.jpg" alt="basketball" width="140" height="140" />
<img src="images/small/2.jpg" alt="beachtree" width="140" height="140" />
<img src="images/small/3.jpg" alt="cupcackes" width="140" height="140" />
<img src="images/small/4.jpg" alt="hangmat" width="140" height="140" />
<img src="images/small/5.jpg" alt="new york" width="140" height="140" />
<img src="images/small/6.jpg" alt="laundry" width="140" height="140" />
<img src="images/small/7.jpg" alt="mom son" width="140" height="140" />
<img src="images/small/8.jpg" alt="picknick" width="140" height="140" />
<img src="images/small/9.jpg" alt="shoes" width="140" height="140" />
<img src="images/small/10.jpg" alt="paris" width="140" height="140" />
<img src="images/small/11.jpg" alt="sunbading" width="140" height="140" />
<img src="images/small/12.jpg" alt="yellow couple" width="140" height="140" />
</div>
<div class="clearfix"></div>
</div>
CSS:
#image_carousel {
padding: 15px 0 15px 40px;
}
#image_carousel img {
border: 1px solid #ccc;
background-color: white;
padding: 9px;
margin: 7px;
display: block;
float: left;
}
#clearfix {
float: none;
clear: both;
}
重新安排順序
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<script src="jquery.carouFredSel-6.2.0-packed.js"></script>
<script src="jquery.touchSwipe.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
然后嘗試
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.