HTML/CSS slayt gösterisi arka planı nasıl yapılır?

Arka plan slayt gösterisinin normal slayt gösterisi gibi diğer fotoğraflarda nasıl görüneceğini merak ediyordum. Birçok kod denedim ve henüz başarılı oldum.HTML/CSS slayt gösterisi arka planı nasıl yapılır?

Şimdi, arka plandaki değişikliklerin iyi çalışan farklı fotoğraflara dönüştürülmesi için bir kodum var, ancak solmuyor. Bunu eklemek için zaten var mı? Eğer bana bildirin lütfen önerileriniz varsa

İşte kod

<html> 
<head> 

<style> 


body{ 
/*Remove below line to make bgimage NOT fixed*/ 
background-attachment:fixed; 
background-repeat: no-repeat; 
background-size: cover; 
/*Use center center in place of 300 200 to center bg image*/ 
background-position: 0 0; background- 
} 
</style> 

<script language="JavaScript1.2"> 

//Background Image Slideshow- © Dynamic Drive (www.dynamicdrive.com) 
//For full source code, 100's more DHTML scripts, and TOS, 
//visit http://www.dynamicdrive.com 

//Specify background images to slide 
var bgslides=new Array() 
bgslides[0]="http://i892.photobucket.c… 

bgslides[1]="http://i892.photobucket.c… 

bgslides[2]="http://i892.photobucket.c… 

//Specify interval between slide (in miliseconds) 
var speed=2000 

//preload images 
var processed=new Array() 
for (i=0;i<bgslides.length;i++){ 
processed[i]=new Image() 
processed[i].src=bgslides[i] 
} 

var inc=-1 

function slideback(){ 
if (inc<bgslides.length-1) 
inc++ 
else 
inc=0 
document.body.background=processed[inc… 
} 

if (document.all||document.getElementById) 
window.onload=new Function('setInterval("slideback()",spee… 

</script> 

</head> 

</html>

olduğunu. Ayrıca, kodlamanın en iyisi değilim ve JavaScript hakkında bir ipucum yok, bu yüzden lütfen ne yapacağınızı açıklayın.

kaynak

2013-02-14 AJ Marshall

Arka plan görüntüsü için bir DIV kullanmayı ve bunun için düşük bir z-endeksi değerine sahip olmayı tercih ederim. Daha sonra jQuery veya başka bir kitaplık kullanarak resimleri kaydırın. Bu sadece bir fikir olsa;) – itsols

Working example on jsFiddle.

kullanın onun yerine bu kodu: (Çalışmak bu kodu sırayla jQuery yüklemek gerekir unutmayın)

HTML

<div class="fadein"> 
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg"> 
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg"> 
</div>

CSS

.fadein { 
    position:relative; 
    height:320px; 
    width:320px; 
} 

.fadein img { 
    position:absolute; 
    left:0; 
    top:0; 
}

JavaScript

Css içinde

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript"> 
$(function() { 
$('.fadein img:gt(0)').hide(); 

setInterval(function() { 
    $('.fadein :first-child').fadeOut() 
          .next('img') 
          .fadeIn() 
          .end() 
          .appendTo('.fadein'); 
}, 4000); // 4 seconds 
}); 
</script>

kaynak

2013-02-14 04:06:44

Hey teşekkürler, jQuery nasıl olsa bilmiyorum bile. –

Yapmanız gereken tek şey, HTML sayfanızdaki yukarıdaki koddaki JavaScript bloğunu içermelidir (

Harika çözüm htmled! Bir soru: Bunu, görüntülerin dinamik genişliği (% 100) ile çalışmak için nasıl birleştirebilirim? jsFiddle'ınızı güncellemeyi denedim, ancak metin resimlerin arkasına yerleştirilir. Bkz. Http://jsfiddle.net/2kkHH/340/ – Publicus

-2

genişliği: 100%; yükseklik: 100%; konum: sabit;

kaynak

2015-05-05 20:44:57 tkd

Bu soruya cevap vermiyor. – Kmeixner

HTML/CSS slayt gösterisi arka planı nasıl yapılır?

cevap

İlgili konular