jQuery旋轉木馬問題

嘿，我正在做一個jQuery旋轉木馬，我有一個問題。圖像顯示在一個盒子裏，當一張幻燈片滑出新的幻燈片。目前我只有4個圖像顯示，主要是因爲如果我再添加一個所有的圖像顯示，而不是一個。我的高度和寬度都在480像素到280像素之間，並不是因爲我想讓它們在這個高度和寬度上，而是因爲如果我改變高度或寬度1px，那麼同樣的事情會發生在上面。jQuery旋轉木馬問題

我希望能夠添加儘可能多的圖像，我也希望能夠將高度和寬度更改爲更大的像素大小。這是我的代碼。

HTML

<!doctype html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script> 
<link href="stylesheet.css" rel="stylesheet" /> 
<script src="javaCode.js"></script> 
<title>TITLE</title> 
<head> <link rel="icon" type="image/vnd.microsoft.icon" 
href="image.png" /> 
</head> 
<style> 
body 
{ 
background-image:url('background.jpg'); 
background-repeat:no-repeat; 
} 
</style> 
<div id="carousel"> 
<ul> 
    <li><img src="image1.jpg" alt="img1" id="img1" class="=img1"/></li> 
    <li><img src="image2.jpg" alt="img2" id="img1" class="img1"/></li> 
    <li><img src="image3.jpg" alt="img3" id="img1" class="img1"/></li> 
    <li><img src="image4.jpg" alt="img4" id="img1" class="img1"/></li> 
</ul> 
</div>

CSS

.logo1{ 
width: 900px; 
height: 275px; 
margin-left: 525px; 
margin-right: auto; 
} 
.AC1{ 
width:480px; 
height:280px; 

} 
#carousel { 
    width: 480px; 
    overflow:hidden; 
} 

#carousel ul { 
    width: 1920px; 
    padding: 0; 
    margin: 0; 
} 

#carousel ul li { 
    width:480px; 
    text-align: center; 
    height: 280px; 
    list-style: none; 
    float: left; 
}

的jQuery

$(document).ready(function(){ 
// Set the interval to be 5 seconds 
var t = setInterval(function(){ 
    $("#carousel ul").animate({marginLeft:-480},1000,function(){ 
     $(this).find("li:last").after($(this).find("li:first")); 
     $(this).css({marginLeft:0}); 
    }) 
},5000);

}）;

P.S.我試圖避免使用插件。過去我和他們有過不愉快的經歷。謝謝您的幫助。

來源

2013-12-17 user3109570

您正在試圖限制轉盤UL的寬度

#carousel ul { 
width: 1920px;

所以當4個圖像是有它能夠正確地渲染爲480×4 = 1920，只要你加5圖像寬度超過，並顯示在第一張圖像的底部。

你可以看看這個jQuery的/ JavaScript的旋轉木馬

How to implement carousel effect using jQuery/JavaScript

來源

2013-12-17 03:59:04

您所遇到的問題可能是bacause分配給第一圖像標籤時的等級值。

<li><img src="image1.jpg" alt="img1" id="img1" class="**=img1**"/></li>

來源

2014-02-08 17:53:21

jQuery旋轉木馬問題

回答

相關問題