Question

嘿我正在制作一个jQuery轮播，我有一个问题。图像显示在一个框中，当一个幻灯片滑出新幻灯片。目前我只有4个图像显示，主要是因为如果我再添加一个所有图像显示而不是一个。我的高度和宽度分别为480px和280px，不是因为我想要它们的高度和宽度，而是因为如果我将高度或宽度改变1px，那么同样的事情就像上面那样。

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

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。我试图避免使用插件。我过去曾经遇到过一些糟糕的经历。感谢您的帮助。

Answer 1

您正试图限制轮播ul的宽度

#carousel ul {
width: 1920px;

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

你可以看一下jquery / javascript carousel

How to implement carousel effect using jQuery/JavaScript

Answer 2

您遇到的问题可能是因为为第一个图片代码指定了类值。

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

jQuery轮播问题

2 个答案: