एचटीएमएल/सीएसएस स्लाइड शो पृष्ठभूमि कैसे फीका है?

मैं सोच रहा था कि आप नियमित स्लाइड शो जैसी अन्य फ़ोटो में पृष्ठभूमि स्लाइड शो कैसे बनाते हैं। मैंने कई कोडों की कोशिश की है और अभी तक सफल होना है।एचटीएमएल/सीएसएस स्लाइड शो पृष्ठभूमि कैसे फीका है?

अब, मेरे पास पृष्ठभूमि को अलग-अलग फ़ोटो में बदलने के लिए एक कोड है जो अच्छी तरह से काम करता है, लेकिन यह फीका नहीं है। क्या इसे जोड़ने के लिए वैसे भी है? आप किसी भी सुझाव कृपया मुझे पता है, तो

यहाँ कोड

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

है। इसके अलावा, मैं कोडिंग में सबसे महान नहीं हूं और जावास्क्रिप्ट के बारे में कोई संकेत नहीं है, इसलिए कृपया बताएं कि क्या करना है।

स्रोत

2013-02-14 AJ Marshall

मैं पृष्ठभूमि छवि के लिए एक डीआईवी का उपयोग करता हूं और इसके लिए कम जेड-इंडेक्स मान रखता हूं। फिर jquery या जो भी अन्य लाइब्रेरी का उपयोग कर चित्रों के माध्यम से बस स्लाइड करें। हालांकि यह केवल एक विचार है;) – itsols

Working example on jsFiddle.

उपयोग के बजाय इस कोड: (ध्यान रखें कि काम करने के लिए इस कोड के लिए क्रम में jQuery लोड करने के लिए की आवश्यकता होगी)

एचटीएमएल

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

सीएसएस

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

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

जावास्क्रिप्ट

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

स्रोत

2013-02-14 04:06:44

हे धन्यवाद, मुझे यह भी नहीं पता कि jQuery को कैसे लिखना है। –

आपको बस इतना करना है कि आपके HTML पृष्ठ में उपरोक्त कोड में जावास्क्रिप्ट का ब्लॉक शामिल है (

ग्रेट समाधान htmled! एक सवाल हालांकि: मैं इसे छवियों की गतिशील चौड़ाई (100%) के साथ काम करने के लिए कैसे जोड़ सकता हूं? मैंने आपके जेएसफ़िल्ड को अपडेट करने का प्रयास किया, लेकिन फिर टेक्स्ट छवियों के पीछे रखा गया। देखें http://jsfiddle.net/2kkHH/340/ – Publicus

-2

Css के अंदर:

चौड़ाई: 100%; ऊंचाई: 100%; स्थिति: निश्चित;

स्रोत

2015-05-05 20:44:57 tkd

यह सवाल का जवाब नहीं देता है। – Kmeixner

एचटीएमएल/सीएसएस स्लाइड शो पृष्ठभूमि कैसे फीका है?

उत्तर

संबंधित मुद्दे