Question

我正在尝试制作图库幻灯片。我是javscript和jQuery的新手。 1 - 我没有看到任何动作，我不知道为什么？ 2 - 我无法居中div的图像中心，左侧有连接。感谢您对此主题的任何帮助和指导。

在这里，我们可以看到效果良好的代码。 Gallery

我的代码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%;
}

Answer 1

执行动画时，您将CSS样式应用于属性。因此，在定位的情况下，您必须指明单位，如：

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

画廊幻灯片放映，动态图片不动

1 个答案: