Làm thế nào để làm cho HTML/CSS slideshow mờ dần?

Tôi đã tự hỏi làm thế nào bạn thực hiện một slideshow nền mờ dần vào các bức ảnh khác như một slideshow thông thường. Tôi đã thử nhiều mã và chưa thành công.Làm thế nào để làm cho HTML/CSS slideshow mờ dần?

Bây giờ, tôi có một mã để thực hiện thay đổi nền cho các ảnh khác nhau hoạt động tốt nhưng không bị mờ dần. Có anyway để thêm này?

Đây là mã

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

Nếu bạn có bất cứ đề nghị xin vui lòng cho tôi biết. Ngoài ra, tôi không phải là người giỏi nhất trong việc viết mã và không có manh mối về JavaScript, vì vậy hãy giải thích việc cần làm.

Nguồn

2013-02-14 AJ Marshall

Tôi thà sử dụng DIV cho hình nền và có giá trị z-index thấp cho nó. Sau đó, chỉ cần trượt qua các hình ảnh bằng cách sử dụng jquery hoặc bất kỳ thư viện nào khác. Đó chỉ là một ý tưởng mặc dù;) – itsols

Working example on jsFiddle.

Sử dụng mã này để thay thế: (lưu ý rằng bạn sẽ cần phải tải jQuery để cho mã này để làm việc)

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>

Nguồn

2013-02-14 04:06:44

Hey cảm ơn, tôi thậm chí không biết làm thế nào để wright jQuery mặc dù. –

Tất cả những gì bạn cần làm là bao gồm khối JavaScript đó trong mã ở trên trong trang HTML của bạn (ở dưới cùng trước phần

Giải pháp tuyệt vời được khắc phục! Một câu hỏi là: Làm thế nào tôi có thể kết hợp điều này để làm việc với chiều rộng động (100%) của hình ảnh? Tôi đã thử cập nhật jsFiddle của bạn, nhưng sau đó văn bản được đặt phía sau hình ảnh. Xem http://jsfiddle.net/2kkHH/340/ – Publicus

-2

Bên trong Css:

rộng: 100%; chiều cao: 100%; vị trí: cố định;

Nguồn

2015-05-05 20:44:57 tkd

Điều này không trả lời được câu hỏi. – Kmeixner

Làm thế nào để làm cho HTML/CSS slideshow mờ dần?

Trả lời

Các vấn đề liên quan