Галерея слайд-шоу, движущиеся изображения не движутся - PullRequest
Новая
       29

Галерея слайд-шоу, движущиеся изображения не движутся

0 голосов
/ 26 марта 2012

Я пытаюсь создать галерею слайд-шоу. Я новичок в JavaScript и JQuery. 1 - я не вижу движущихся движений и не знаю почему? 2 - Я не могу отцентрировать центр изображения div, на левой стороне есть связь. Спасибо за любую помощь и руководство по этому вопросу.

Здесь мы видим хорошо работающий код. Галерея

Мой код HTML-файл: 

<html>
<head>
<title>Your title here</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type = "text/javascript" language = "Javascript">
<!-- Hide from older browsers;
window.onload = function(){ 
$('#scroll_me').click(function() {
    var item_width = $('#portfolio-tiles li').outerWidth() + 30;
    var left_indent = parseInt($('#portfolio-tiles').css('left')) - item_width;
    $('#portfolio-tiles:not(:animated)').animate({
        'left': left_indent
    }, 500, function() {
        $('#portfolio-tiles li:last').after($('#portfolio-tiles li:first'));
        $('#portfolio-tiles').css({
            'left': '-300px'
        });});
    });
 };
// end hide -->
</script>
</head>
<body>
<div id="container">
<div id='carousel_inner'>
    <ul id="portfolio-tiles">
<li>
<a id="example2" href="p1.png">
<img  alt="item1" src="p1.png">
</a>
</li>
<li>
<a id="example2" href="p2.png">
<img  alt="item2" src="p2.png">
</a>
</li>
<li>
<a id="example2" href="p3.png">
<img  alt="item3" src="p3.png">
</a>
</li>
<li>
<a id="example2" href="p5.png">
<img  alt="item4" src="p5.png">
</a>
</li>    
</ul>
</div>
</div><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div><h2>Click here</h2><img  id="scroll_me" alt="item1" src="p4.png"></div>
</body>
</html>

Мой код CSS-файла: 

#carousel_inner{
    background-color: #60F0F0;
    background-position: left top;
    position:relative;
    list-style-type: none;
    float: left;
    margin: 5px 5px 5px 5px;
    padding: 0px  0px 0px 0px;
    height: 215px;
    width: 980px;
    overflow: hidden;
    border:1px;
border-style:solid;
border-color:yellow;

}

#portfolio-tiles li img {
cursor:pointer;
cursor: hand; 
border:1px;
border-style:solid;
border-color:red; 
}

#portfolio-tiles li {
    display: block;
    float: left;
    font-style: normal;
    font-weight: normal;
    list-style-type: none;
    margin: 0px  0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 284px;
    border:1px;
border-style:solid;
border-color:green;
}

#portfolio-tiles  {
    position:relative;
left:-316px; /* important (this should be negative number of list items width(including margin) */
list-style-type: none; /* removing the default styling for unordered list items */
margin: 0px;
padding: 10px 0px 0px 10px;
width:9999px; /* important */

}


img {
    width: 277px; 

}

#scroll_me{
 float: left;
 display: block;
 margin: 0px;
}

h2 {
float: left;
   position: relative;
   top: 20px;
   left: 0;
   width: 100%;
}

1 Ответ

1 голос
/ 26 марта 2012

когда вы делаете анимацию, вы применяете стили CSS к свойствам.поэтому, в случае позиционирования, вы должны указать единицы измерения, например: 

$('#portfolio-tiles:not(:animated)').animate({
        'left': left_indent + 'px'
    }...
...