Yeni Kayıt
Konudaki Resimler
|
Hızlı 
Bildirim
Basit slideshow nasıl yapabilirim?
Sıcak Fırsatlarda Tıklananlar
Editörün Seçtiği Fırsatlar
Bu Konudaki Kullanıcılar:
1 Misafir - 1 Masaüstü
Giriş
Mesaj
-
-
Neden hazır kodları kullanmak istemiyorsun ki? Her şeyi kendin yapmaya kalkarsan yapacağın işi bitiremezsin. Profesyonel iş yapan, template satan kişiler bile hazır kodları kullanıyor. Örnek olarak verdiğin link bile Owl Carousel kullanmış. Ama öğrenmek amacıyla basit bir slideshow kodlarını incelemek istiyorsan basit bir örnek vereyim.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ile basit bir slideshow</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
h1 {
text-align: center;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 600px;
height: 340px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>jQuery ile basit bir slideshow</h1>
<div id="slideshow">
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/0548677e6432786dd8df61eb3aaec139_L.jpg">
</div>
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/d3b3799d6611d677944f5f86a500beb3_L.jpg">
</div>
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/339a0e1449b6b4062056bc300d87e893_L.jpg">
</div>
</div>
<script>
$( document ).ready(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
</body>
</html>
Yukarıdaki kodlarda slideUp ve slideDown ile geçiş efekti verilmiş. Bunların yerine fadeIn ve fadeOut ile solarak geçiş efekti veya toggle ile daha değişik bir efekt veya jQuery'nin diğer efektlerini kullanabilirsin. İşte sana basit slideshow örneği...
Haa unutmadan... Ben de bu kodları başka yerden arakladım. Üzerinde biraz değişiklik yaptım.
-
quote:
Orijinalden alıntı: DoubleDragon
Neden hazır kodları kullanmak istemiyorsun ki? Her şeyi kendin yapmaya kalkarsan yapacağın işi bitiremezsin. Profesyonel iş yapan, template satan kişiler bile hazır kodları kullanıyor. Örnek olarak verdiğin link bile Owl Carousel kullanmış. Ama öğrenmek amacıyla basit bir slideshow kodlarını incelemek istiyorsan basit bir örnek vereyim.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ile basit bir slideshow</title>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<style>
h1 {
text-align: center;
}
#slideshow {
margin: 50px auto;
position: relative;
width: 600px;
height: 340px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<h1>jQuery ile basit bir slideshow</h1>
<div id="slideshow">
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/0548677e6432786dd8df61eb3aaec139_L.jpg">
</div>
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/d3b3799d6611d677944f5f86a500beb3_L.jpg">
</div>
<div>
<img src="http://www.petwebsite.co.uk/media/k2/items/cache/339a0e1449b6b4062056bc300d87e893_L.jpg">
</div>
</div>
<script>
$( document ).ready(function() {
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.slideUp(1000)
.next()
.slideDown(1000)
.end()
.appendTo('#slideshow');
}, 3000);
});
</script>
</body>
</html>
Yukarıdaki kodlarda slideUp ve slideDown ile geçiş efekti verilmiş. Bunların yerine fadeIn ve fadeOut ile solarak geçiş efekti veya toggle ile daha değişik bir efekt veya jQuery'nin diğer efektlerini kullanabilirsin. İşte sana basit slideshow örneği...
Haa unutmadan... Ben de bu kodları başka yerden arakladım. Üzerinde biraz değişiklik yaptım.
Merhaba,
örnek için çok teşekkür ederim. Ama bazı özeelikleri kötü olmuş. Resimler yukarıdan aşağıya düşüyor, sol,sağ okları olsaydı iyi olurdu.
Lütfen yardım edin.
Cevaplarınız için şimdiden çok teşekkür ederim.
İyi günler dileğiyle.
-
Egen ccaann
E
kullanıcısına yanıt
Daha önce dediğim gibi diğer jQuery efekt fonksiyonlarını kullanarak resimler arası değişik geçişler yapmak mümkündür. Sağ sol okları da sen yap. Ben basit bir şey olsun diye örnek verdim. Şu özellik de olsun bu özellik de olsun diye diye ortaya kapsamlı slideshow çıkar ama günler sürer. Zaten benim o kadar bilgim de yok. Piyasada zaten çok güzel yapılmış slideshowlar varken sıfırdan kodlama yapmak bana mantıksız geliyor. Tekeri yeniden keşfetmeye gerek yok. -
Merhaba,
arkadaşlar şöyle bir kod buldum (w3school'dan) :<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}
/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides fade">
<img src="img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_fjords_wide.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="img_mountains_wide.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>
İsterseniz şu siteden bakabilirsiniz :
https://www.w3schools.com/howto/howto_js_slideshow.asp
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow
Ama bir kaç şeyi sildim.
Öncesi :
Sonrası :
Textleri ve yukarı soldaki numaraları sildim.
Ama bazı yerileri anlamadım ve değiştirmek istediğim yerler var.
Değiştirmek istediğim yerler :
Değiştirmek istediğim numaralar sliderin üzerinde olabilirdi (text yerinde)
Birde slider tam sayfa ona bir height ve width değerleri vermem lazım
Sizden istediğim koda yorum satırı ekleyerek anlamayı kolaylaştırmak ve silmek, değiştirmek istediğim yerlere göre kodu düzenlemek.
Lütfen yardım edin.
Cevaplarınız için şimdiden çok teşekkür ederim.
İyi günler dileğiyle.
< Bu mesaj bu kişi tarafından değiştirildi Egen ccaann -- 26 Ocak 2018; 21:10:5 >
-
Merhaba,
arkadaşlar önceki mesajımdaki sorunları çözdüm. Şimdi resimleri veritabanından almak istiyorum. Bunun için foreach kullandım. Ama sorun şu hiç bir çıktı yok
Kodlar şu şekilde :
$vericek83 = $baglanti1 -> prepare("select * from gosterim");
$vericek83 -> execute();
$vericek83say = $vericek83 -> rowCount();
if ($vericek83say == 0) {
echo "Count çalışmıyor";
}elseif ($vericek83say > 0) {
?>
<div id="slideshow">
<a class="geri" onclick="yenislide(-1)">❮</a>
<a class="ileri" onclick="yenislide(1)">❯</a>
<?php
$numara = 0;
foreach ($vericek83 as $bilgiler83) {
$numara++;
?>
<div class="slide yuz">
<img src="<?php echo($bilgiler83["resimlink"]); ?>">
</div>
<div>
<span class="yuvarlak" onclick="eskislide(<?php echo($numara); ?>)"></span>
</div>
<?php
}
?>
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("yuvarlak");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
<?php
}
?>
<style>
*{
box-sizing: border-box;
}
body{
font-family: Verdana, sans-serif;
margin: 0;
}
.slide{
display: none;
}
img{
vertical-align: middle;
}
#slideshow{
max-width: 1000px;
margin: auto;
position: absolute;
top: 150px;
left: 20px;
}
.geri, .ileri{
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
}
.ileri{
right: 0;
border-radius: 3px 0 0 3px;
}
.yuvarlak{
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .yuvarlak:hover{
background-color: #717171;
}
.yuz{
-webkit-animation-name: fade;
-webkit-animation-duration: 1.5s;
animation-name: fade;
animation-duration: 1.5s;
}
@-webkit-keyframes fade{
from{
opacity: .4;
}
to{
opacity: 1;
}
}
@keyframes fade{
from{
opacity: .4;
}
to{
opacity: 1;
}
}
@media only screen and (max-width: 300px){
.geri, .ileri{
font-size: 11px;
}
}
</style>
Bağlantıda sorun yok gibi.
Bu sorunu nasıl çözebilirim?
Lütfen yardım edin.
Cevaplarınız için şimdiden çok teşekkür ederim.
İyi günler dileğiyle.
Sayfa:
1
Ip işlemleri
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
Bu mesaj IP'si ile atılan mesajları ara Bu kullanıcının son IP'si ile atılan mesajları ara Bu mesaj IP'si ile kullanıcı ara Bu kullanıcının son IP'si ile kullanıcı ara
KAPAT X
