jQuery 轮播问题答案

【问题标题】：jQuery Carousel ProblemsjQuery 轮播问题
【发布时间】：2014-02-09 01:53:21
【问题描述】：

嘿，我正在制作一个 jQuery 轮播，但我遇到了一个问题。图像显示在一个框中，并在一张幻灯片中滑出新幻灯片。目前我只有 4 张图像显示，主要是因为如果我再添加一张，则所有图像都会显示，而不仅仅是一张。我的高度和宽度为 480 像素 x 280 像素，不是因为我希望它们处于那个高度和宽度，而是因为如果我将高度或宽度更改 1 像素，则会发生与上面相同的事情。

我希望能够添加尽可能多的图像，并且我希望能够将高度和宽度更改为更大的像素大小。这是我的代码。

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

});

附言我试图避免使用插件。过去我和他们有过一些不好的经历。感谢您的帮助。

【问题讨论】：

标签： jquery html css

【解决方案1】：

您正在尝试限制轮播 ul 的宽度

#carousel ul {
width: 1920px;

所以当有 4 张图片时，它能够正确渲染为 480 x 4 = 1920，只要添加第 5 张图片，宽度就会超过并显示在第 1 张图片的底部。

你可以看看这个 jquery/javascript carousel

How to implement carousel effect using jQuery/JavaScript

【讨论】：

【解决方案2】：

您遇到的问题可能是由于为第一个图像标签分配的类值。

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

【讨论】：