Jak zlikwidować tło pokazu slajdów w HTML/CSS?

Zastanawiam się, jak zrobić pokaz slajdów w tle, aby przejść do innych zdjęć, takich jak zwykły pokaz slajdów. Próbowałem wielu kodów i jeszcze się nie udało.Jak zlikwidować tło pokazu slajdów w HTML/CSS?

Teraz mam kod dokonać zmiany tła na różnych zdjęciach, które działa dobrze, ale nie znikną. Czy mimo to można to dodać?

Oto 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>

Jeśli masz jakieś sugestie, proszę dać mi znać. Ponadto nie jestem najlepszy w kodowaniu i nie mam pojęcia o JavaScript, więc proszę wyjaśnij, co robić.

Źródło

2013-02-14 AJ Marshall

Wolałbym używać DIV dla obrazu tła i mieć dla niego niską wartość indeksu Z. Następnie po prostu przesuwaj zdjęcia za pomocą jquery lub innej biblioteki. To tylko pomysł, ale;) – itsols

Working example on jsFiddle.

Użyj tego kodu: (należy pamiętać, że trzeba załadować jQuery aby ten kod do pracy)

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

<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>

Źródło

2013-02-14 04:06:44

Hej dziękuję, nie wiem nawet jak Wright jQuery. –

Wszystko, co musisz zrobić, to uwzględnić ten blok kodu JavaScript w powyższym kodzie na stronie HTML (na dole przed

Doskonałe rozwiązanie htmled! Jedno pytanie jednak: jak mogę to połączyć z dynamiczną szerokością (100%) obrazów? Próbowałem aktualizacji jsFiddle, ale tekst jest umieszczony za obrazami. Zobacz http://jsfiddle.net/2kkHH/340/ – Publicus

-2

Wewnątrz CSS

Szerokość: 100%; wysokość: 100%; pozycja: naprawiona;

Źródło

2015-05-05 20:44:57 tkd

To nie odpowiada na pytanie. – Kmeixner

Jak zlikwidować tło pokazu slajdów w HTML/CSS?

Odpowiedz

Powiązane problemy