Merhaba beyler. arkadaşın ödevi için basit bir script hazırlıyoruz ancak görselleri bir butonla +10 +10 ilerletemiyoruz. Demek istediğim ilk tıklandığında 453-462 arası resimler gözükecek. Sonra bir butonla 463 ile 472 arasını gösterecek. İleri ve geri alabilirsek süper olur. Aşağıda bizim istediğimize yakın bir script bulduk.
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>PicHunter</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
body {
background-color: black;
}
article, aside, figure, footer, header, hgroup,
menu, nav, section { display: block; }
div.kutu {
float:left;
text-align:center;
border:1px solid green;
padding:10px;
margin:5px;
color:green;
width:150px;
height:175px;
display:none;
}
div.kutu.acik {
display:block;
}
div.kutu > a > img {
max-width:150px;
max-height:150px;
margin:5px;
border:none;
}
</style>
</head>
<body>
<h1><font color="green">PicHunter</font></h1>
<form onsubmit="goster();return false">
<input type="text" id="bas" value="394190"> - <input type="text" value="394290" id="son"> - <button onclick="goster();" >BUL</button>
</form>
<div style="clear:both;"></div>
<p id="hello"></p>
<div styleclear:both;"></div>
<script id="jsbin-javascript">
function goster() {
var bas=parseInt(document.getElementById('bas').value,0);
var son=parseInt(document.getElementById('son').value,0);
document.getElementById('hello').innerHTML="";
for (var i=bas;i<son;i++) {
document.getElementById('hello').innerHTML +='<div class="kutu" id="kkutu' + i + '"><a href="#"><img src="https://xxxyyyyzzzzz.com/ResimOku.aspx?id=' + i + '" onload="$(this).parent().parent().addClass(\'acik\')" /></a><br>' + i + ' Numara</div>';
}
}
function ekle() {
var sy=parseInt($('select#arti').val(),0);
document.getElementById('bas').value=parseInt(document.getElementById('bas').value,0)+sy;
document.getElementById('son').value=parseInt(document.getElementById('bas').value,0)+sy;
goster();
}
</script>
</body>
</html>