JavaScript görselleri 10ar 10ar ekrana yazdırma

18-05-2016, 21:28:47

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>

28-05-2016, 11:35:13

Kocaportal

var start = 0;
var limit = 10;
var end;

function goTo(direction) {
  if(direction == "prev") {
	if(start > 0) {
      end = start;
      start = start - limit;      
      callItems(start,end);
	} else {
		console.log("zaten en baştasınız.");
	}
  } else if(direction == "next") {
		 start = start + limit;
		 end = start + limit;
         callItems(start,end);
  }
}

function callItems(start,end) {
  console.log("başlangıç : " + start);
  console.log("bitiş : " + end);
}

        <a href="javascript:goTo('prev');">Geri</a>
	<a href="javascript:goTo('next');">İleri</a>

çok çok basit bir protitipi yukarıda mevcut. mantığını anlamanız açısından gönderiyorum. umarım yardımcı olur.