Сегодня утром я запустил jQuery (так что я новичок), и сначала он казался многообещающим, но потом вот это ...
Идея состоит в том, чтобы постепенно увеличивать и уменьшать изображение друг за другом с задержкой,Но все они одновременно исчезают, а затем исчезают.Я хочу, чтобы они делали это один за другим.
Попытался изменить один тег <img>, затем заполнить его html () a <div>, затем этим и несколькими другими вещами.Это может быть кусок пирога, но я просто не вижу этого!
<html>
<head>
<style type="text/css">
span.button{
display:block;
width:10px;
border:1px solid;
float:left;
background:#eeeeee;
padding:5px;
margin:5px;
font-weight:bold;
color:#333333;
cursor:pointer;
border-radius:7px;
border-color:#555555;
box-shadow: 0px 0px 2px #777777;
}
img.gImages{
border:1px solid;
border-left-color:#eeeeee;
border-top-color:#eeeeee;
border-right-color:#666666;
border-bottom-color:#666666;
border-radius:5px;
height:300px;
box-shadow: 0px 0px 5px #777777;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var numOfimgs=3;
$(document).ready(function(){
function preloadImages(numOfimgs){
var i=0;
for(i=1; i<numOfimgs+1; i++){
$("div").append('<img class="gImages" id="'+i+'slika" src="'+i+'.jpg" />');
$("img#"+i+"slika").hide();
$("div").append(i);
}
}
preloadImages(numOfimgs);
function animateImage(imgId){
$("img#"+imgId+"slika").fadeIn("slow");
$("img#"+imgId+"slika").fadeOut("slow");
}
function startAnimation(){
var i=0;
for(i=1; i<numOfimgs+1; i++){
animateImage(i);
}
}
startAnimation();
});
</script>
</head>
<body>
<div></div>
<span>below the div</span>
</body>
</html>