Проблемы с jQuery Carousel

Question

Проблемы с jQuery Carousel

0

Эй, я делаю карусель jQuery, и у меня есть проблема. Изображения отображаются в окне, и в качестве одного из них отображаются слайды. В настоящее время у меня есть только 4 изображения, которые отображаются, главным образом потому, что если я добавлю еще одну, все изображения будут отображаться вместо одного. У меня высота и ширина 480 пикселей на 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);

});

PS Я пытаюсь избежать использования плагинов. У меня были некоторые неприятные переживания с ними в прошлом. Спасибо за помощь.

user3109570 17 дек. 2013, в 05:02

Источник

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Suphi ÇEVİKER · Answer 1 · 2014-02-08T16-01-00.000Z

Проблема, которую вы испытываете, может быть вызвана значением класса, назначенным для первого тега изображения.

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

Raunak Kathuria · Answer 2 · 2013-12-17T01-51-00.000Z

Вы пытаетесь ограничить ширину карусели ul

#carousel ul {
width: 1920px;

поэтому, когда есть 4 изображения, он может правильно отображать 480 x 4 = 1920, как только вы добавите пятое изображение, ширина превысит его, и он будет показан внизу 1-го изображения.

Вы можете посмотреть на это для карусели jquery/javascript

Как реализовать эффект карусели с помощью jQuery/JavaScript