रीफ्रेश पर यादृच्छिक पृष्ठभूमि छवि

मैं उपयोगकर्ता द्वारा साइट पर आने पर प्रत्येक बार यादृच्छिक रूप से एक छवि लोड करने का प्रयास कर रहा हूं। मैंने इस मुद्दे पर पिछले कुछ धागे का पालन किया है और यह काम नहीं कर रहा है।रीफ्रेश पर यादृच्छिक पृष्ठभूमि छवि

मैं वर्तमान में इस ट्यूटोरियल अनुसरण कर रहा हूं: http://www.markinns.com/articles/full/simple_two_line_image_randomiser_script_with_jquery

लेकिन मैं अभी भी समस्याएं आ रही हैं। छवियां/छवियों/फ़ोल्डर में हैं और फ़ाइल नाम सरणी में सही ढंग से दर्ज किए गए हैं।

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" > 

var images = ['OUT01ari.jpg' 'OUT02adobe.jpg' 'OUT03alife.jpg' 'OUT04chinup.jpg' 'OUT05datenightwinecologne.jpg' 'OUT06officechair.jpg' 'OUT07printer.jpg' 'OUT08whitewall.jpg' 'OUT09umbrella.jpg' 'OUT10converse.jpg' 'OUT11wardrobebar.jpg']; 

$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 

</script>

मैं तो पृष्ठ के मुख्य भाग में div दर्ज कर चुके हैं, लेकिन कोई लाभ नहीं हुआ:

<body> 

<div ="#background"></div> 
<div class="container"> 

</div> 
</body>

मैं कहाँ गलत हो रहा हूँ?

धन्यवाद।

स्रोत

2013-10-14 Hohohobo

जब आप अपनी सरणी को परिभाषित करते हैं तो आपके पास सरणी मानों के बीच अल्पविराम विभाजक होना चाहिए।

आपके पास दो अलग-अलग स्क्रिप्ट तत्व भी होना चाहिए, एक jquery और दूसरे को आपके कोड के लिए शामिल करना चाहिए।

किसी दस्तावेज़-विशेषता वाले स्क्रिप्ट टैग की सामग्री को अधिकांश ब्राउज़रों द्वारा अनदेखा किया जाना चाहिए।

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script> 

<script type="text/javascript"> 
var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
$('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
</script>

W3C 4.3 Scripting HTML5 का कहना है:

If there is a src attribute, the element must be either empty or contain only script documentation that also matches script content restrictions.

और एक ही पहले के संस्करणों मेरा मानना है कि के लिए सच है।

संपादित करें:

आप स्थानीय फाइल सिस्टम पर काम कर रहे हैं, तो करने के लिए http jQuery के लिए यूआरएल को बदलने के लिए सुनिश्चित कर लें: // के बजाय सिर्फ //।

साथ ही, सुनिश्चित करें कि आपकी स्क्रिप्ट निष्पादित की गई है जब #back38 तत्व document ready पर कॉल करके मौजूद है।

यह उदाहरण भी स्थानीय स्तर पर काम करना चाहिए:

<html> 
<head> 
    <style type="text/css"> 
    #background { 
    position:fixed; left: 0px; 
    top: 0px; background-size:100%; 
    width:100%; height:100%; 
    -webkit-user-select: none; -khtml-user-select: none; 
    -moz-user-select: none; -o-user-select: none; user-select: none; 
     z-index:9990; 
    } 
    </style> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript" ></script> 
    <script type="text/javascript"> 
    $(function() { 
    var images = ['OUT01ari.jpg', 'OUT02adobe.jpg', 'OUT03alife.jpg', 'OUT04chinup.jpg', 'OUT05datenightwinecologne.jpg', 'OUT06officechair.jpg', 'OUT07printer.jpg', 'OUT08whitewall.jpg', 'OUT09umbrella.jpg', 'OUT10converse.jpg', 'OUT11wardrobebar.jpg']; 
    $('#background').css({'background-image': 'url(images/' + images[Math.floor(Math.random() * images.length)] + ')'}); 
    }); 
    </script> 
</head> 
<body> 
    <div id="background"></div> 
    <div class="container"> 
    </div> 
</body> 
</html>

स्रोत

2013-10-14 21:24:09 becquerel

धन्यवाद, मैंने इन त्रुटियों में इशरवुड और जैकौह द्वारा दी गई त्रुटियों के साथ संशोधन किया है लेकिन छवियां अभी भी लोड नहीं हो रही हैं। – Hohohobo

मैंने एक पहेली बनाई जो काम करता है: http://jsfiddle.net/ffXUC/ - हालांकि यह कहना मुश्किल है कि आपका क्यों नहीं है। क्या आपने किसी भी त्रुटि के लिए ब्राउज़र कंसोल/वेब डेवलपर टूल (क्रोम में एफ 12) की जांच की है? – becquerel

धन्यवाद - और नहीं, मैंने नहीं किया था। मुझे जो त्रुटि मिलती है वह है: Uncaught ReferenceError: $ index.html परिभाषित नहीं किया गया है: 11 (अनाम फ़ंक्शन)। लाइन 11: $ ('#background')। सीएसएस ({'पृष्ठभूमि-छवि': 'यूआरएल (छवियों /' + छवियां [Math.floor (Math.random() * images.length)] + ')'}); – Hohohobo

<div ="#background"></div>

होना चाहिए

<div id="background"></div>

(या था कि सिर्फ एक टाइपो?)

स्रोत

2013-10-14 21:15:37 isherwood

'' '

होना चाहिए

' –

धन्यवाद। फिक्स्ड। थकी आँखें।:- डी – isherwood

पृष्ठभूमि छवि दिखाने के लिए, एक div कुछ आकार/क्षेत्र होना चाहिए, है-तो आप इस की कोशिश की?

<body> 

<div id="background" style="width: 50px; height: 60px;"></div> 
<div class="container"> 

</div> 
</body>

स्रोत

2013-10-14 21:20:59 jacouh

मैं पहले से ही 100% की पृष्ठभूमि div चौड़ाई और ऊंचाई गुणों को दिया होगा, इसलिए छवि स्क्रीन भर जाएगी: #background { \t स्थिति: निश्चित; \t बाएं: 0 पीएक्स; \t शीर्ष: 0 पीएक्स; \t पृष्ठभूमि आकार: 100%; \t चौड़ाई: 100%; \t ऊंचाई: 100%; \t -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; उपयोगकर्ता-चयन: कोई नहीं; \t जेड-इंडेक्स: 99 0 9; } – Hohohobo

रीफ्रेश पर यादृच्छिक पृष्ठभूमि छवि

उत्तर

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