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旋转木马问题

回答

相关问题