用JCarousel改變高度

我修改了這個靈活的例子。我改變了高度，但圖像被切斷。我不知道爲什麼會發生這種情況。誰能幫我這個？用JCarousel改變高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us"> 
<head> 
<title>jCarousel Examples</title> 
<link href="../style.css" rel="stylesheet" type="text/css" /> 
<!-- 
    jQuery library 
--> 
<script type="text/javascript" src="../lib/jquery-1.4.2.min.js"></script> 
<!-- 
    jCarousel library 
--> 
<script type="text/javascript" src="../lib/jquery.jcarousel.min.js"></script> 
<!-- 
    jCarousel skin stylesheet 
--> 
<link rel="stylesheet" type="text/css" href="../skins/tango/skin.css" /> 

<style type="text/css"> 

/** 
* Overwrite for having a carousel with dynamic width. 
*/ 
.jcarousel-skin-tango .jcarousel-container-horizontal { 
    width: 85%; 
} 

.jcarousel-skin-tango .jcarousel-clip-horizontal { 
    width: 100%; 
    height:300px; 

} 

</style> 

<script type="text/javascript"> 

jQuery(document).ready(function() { 
    jQuery('#mycarousel').jcarousel({ 
     visible: 4 
    }); 
}); 

</script> 

</head> 
<body> 
<div id="wrap"> 
    <h1>jCarousel</h1> 
    <h2>Riding carousels with jQuery</h2> 

    <h3>Flexible carousel</h3> 
    <p> 
    This example shows a carousel with flexible item width. In this case, always 
     4 items are visible (resize the browser window to see what happens). 
    </p> 

    <ul id="mycarousel" class="jcarousel-skin-tango"> 
    <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="175" height="375" /></li> 
    <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="175" height="375" /></li> 
    <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="175" height="375" alt="" /></li> 
    <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="175" height="375" alt="" /></li> 
    </ul> 

</div> 
</body> 
</html>

這裏是發生了什麼：

enter image description here

正如你所看到的，圖像會被截斷。

來源

2012-08-17 user1513192

將您的LI設置爲您想要的高度和寬度。你將需要這個jcoursel，否則它不會正確循環。

#mycarousel li { height: 375px; width: 175px;}

來源

2012-08-17 18:12:09 chadpeppers

哇,,,,,,,,,,,,,,,,, – user1513192 2012-08-17 18:36:00

它不適用於我:( – Volatil3 2013-04-27 12:18:32

用JCarousel改變高度

回答

相關問題