Gallery slide show ,motion pictures are not moving
Question
I am try to build Gallery slide show. I am new in javscript and jQuery. 1 - I don't see any mottion moving and I don't no why? 2 - I can not center the image center of the div, the left side there is linkage. Thanks for any help and guidance on the subject.
Here we can see code that work good. Gallery
My code HTML file:
<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>
My code CSS file:
#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 answers
solution1
1 2012-03-26 12:47:58
when you do the animate, you are applying CSS styles to the properties. therefore, in the case of positioning, you have to indicate the units, like:
$('#portfolio-tiles:not(:animated)').animate({
'left': left_indent + 'px'
}...
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.