Diaporama de fond - Jquery

J'essaie de créer un diaporama qui se déroulera dans un DIV en arrière-plan tout en ayant des liens sur le dessus. Le problème que je rencontre est que lorsque je fais la transition entre les images en utilisant les fonctions fadeIn et fadeOut JQuery, les liens disparaissent également. Est-il possible de n'affiner que l'image d'arrière-plan? Mon code est ci-dessous:Diaporama de fond - Jquery

<html> 
<head> 
<script type="text/javascript" src="jquery.js"> 
var bgimage=new Array() 
    bgimage[0] = 'bg_pic2.jpg'; 
    bgimage[1] = 'bg_pic3.jpg'; 
    bgimage[2] = 'bg_pic4.jpg'; 
    bgimage[3] = 'cbg_pic5.jpg'; 
    bgimage[4] = 'bg_pic1.jpg'; 

    var abc=-1 

    function t() 
    { 
    if (abc<bgimage.length-1) 
{ 
    abc++; 
} 
else 
{ 
    abc=0; 
} 
    document.getElementById("mainpic").style.backgroundImage = 'url("'+bgimage[abc]+'")'; 
$('#mainpic').fadeIn(); 
$('#mainpic').delay(3900).fadeOut(); 

    } 
      window.onload = load; 

    function load() 
    { 
$('#mainpic').hide(); 
    $('#mainpic').delay(500).fadeIn(); 
    document.getElementById("mainpic").style.backgroundImage =  'url(css/images/bg_pic1.jpg)'; 
    setInterval("t()",5000); //change every 4 seconds, can be changed. 
$('#mainpic').delay(3600).fadeOut(); 
    } 


//--> 
</script> 
</head> 

<body> 
    <div id="container" > 
    <div id="mainpic" class="mainpic"> 
     <div style="float:right; height: 531px; width: 20px"></div> 
     <br />   
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
     <div class="blog"><a href=""></a></div> 
     </div>   
    </div> 
</body>

Source

2010-10-12 user473669

Vous devriez être en mesure d'obtenir l'effet que vous voulez si vous mettez le texte dans un DIV séparé de l'image. De cette façon, la disparition de l'image div ne disparaîtra pas le texte.
La div contenant le texte et les images doit avoir un positionnement relatif avec les deux divs enfants ayant un positionnement absolu. Le div de texte devrait avoir un z-index plus grand que l'image div pour s'assurer que le texte est "au-dessus" des images.

Essayez quelque chose comme:

 
<body> 
    <div id="container" > 
    <div id="mainpic" class="mainpic" style="position:relative;"> 
     <div style="position: absolute; top: 0px; left: 0px; height: 531px; width: 400px"></div> 
     <div id="text" style="position: absolute; top: 0px; left: z-index=1"> 
     <br />   
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
      <div class="blog"><a href=""></a></div> 
     </div> 
     </div>   
    </div> 
</body>

Notez que j'ai ajusté la largeur de votre div image. Vous voulez probablement définir cela à la largeur réelle de vos images.

Source

2010-10-12 18:32:30

J'ai essayé votre code ci-dessus et il ne fonctionne toujours pas. . . les liens sont toujours en train de disparaître avec le #mainpic DIV. – user473669

Désolé, mon échantillon de code ne vous convient pas. Je pense toujours que le problème est de savoir comment les divs sont imbriqués et je pensais que le changement ci-dessus le réglerait. Si vous avez le plugin firebug pour Firefox, vous pouvez jouer avec un peu pour voir comment les DIVs interagissent. Vous pouvez même modifier le CSS en 'temps réel' avec firebug, cela pourrait aussi aider. –

J'ai réussi à faire fonctionner cela dans Firefox et Chrome, mais IE a poussé l'image vers la droite. . .

<div style="width:755px; height:507px; border: #888 5px solid;"> 
    <div id="container" > 
    <div id="mainpic" class="mainpic" style="position: absolute"> 
    </div>   
    <div id="links" style="position: relative"> 
     <div style="float:right; height: 531px; width: 20px"></div> 
     <br /> 
     <div class="coaches"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="hours"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />  
     <div class="pics"><a href=""></a></div> 
     <br /> 
     <br /> 
     <br /> 
     <br />    
     <div class="blog"><a href=""></a></div> 
    </div>  
    </div>   
</div>

Source

2010-10-12 19:21:15 user473669

Diaporama de fond - Jquery

Répondre

Questions connexes