Comment faire pivoter et le fondu des images d'arrière-plan et avec javascript/ASP.NET/CSS

J'ai besoin de fondu au hasard de mes images d'arrière-plan et arrière.

Il sera un temps de fonction, comme une fois toutes les 5 secondes.
J'ai besoin de le faire avec ASP.NET, Javascript, CSS ou tous les trois.

S'il vous plaît aidez-moi ici les gars. Merci.

OriginalL'auteur SpoiledTechie.com | 2008-09-28

  1. 5

    Cycle, un plugin jQuery est une très flexible, à l'image de la rotation de la solution: http://malsup.com/jquery/cycle/

    OriginalL'auteur Erik Hansen

  2. 2

    C'est la Réponse: jamais l'esprit les gars, après avoir fait un peu plus exacte recherche sur Google. J'ai trouvé une bonne solution.

    <html>
<head>
<!--
This file retrieved from the JS-Examples archives
http://www.js-examples.com
1000s of free ready to use scripts, tutorials, forums.
Author: Steve S - http://jsmadeeasy.com/
-->

<style>
body
{
/*Remove below line to make bgimage NOT fixed*/
background-attachment:fixed;
background-repeat: no-repeat;
/*Use center center in place of 300 200 to center bg image*/
background-position: 300 200;
}
</style>

<script language="JavaScript1.2">
/* you must supply your own immages */
var bgimages=new Array()
bgimages[0]="http://js-examples.com/images/blue_ball0.gif"
bgimages[1]="http://js-examples.com/images/red_ball0.gif"
bgimages[2]="http://js-examples.com/images/green_ball0.gif"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++)
{
  pathToImg[i]=new Image()
  pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide()
{
  if (inc<bgimages.length-1)
    inc++
  else
    inc=0
  document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
  window.onload=new Function('setInterval("bgSlide()",3000)')
</script>

</head>
<body>
<BR><center><a href='http://www.js-examples.com'>JS-Examples.com</a></center> 
</body>
</html>

    Trouvé ici.

    OriginalL'auteur SpoiledTechie.com

  3. 0

    Viens de trouver un tuto sur comment faire avec des images d'arrière-plan CSS et jQuery...

    http://www.marcofolio.net/webdesign/advanced_jquery_background_image_slideshow.html

    Semble assez en profondeur. Va essayer de l'utiliser pour un projet, je suis actuellement en entreprise. Présentera un rapport sur la façon dont il s'est avéré.

    Edit 1

    Mentionnés ci-dessus jQuery semble avoir adressé ma question où le jQuery Cycle plugin ne pouvait pas. Regardez http://egdata.com/baf/ pour un exemple. Le principal problème était que le diaporama contenu des diapositives qui ont été 1500px de large où la largeur de la page est 960px.

    Pour une raison quelconque, le jQuery Cycle plugin ajoute une propriété de style css pour la largeur lors de l'affichage de la diapositive en cours. Initialement, il semblait correct, mais échoue lorsque la fenêtre du navigateur est redimensionnée. Le Cycle semble définir la largeur de la glisse sur la charge, et dans mon cas, j'ai besoin de la largeur de rester à 100% à la place de la largeur en pixels de la fenêtre. http://egdata.com/baf/index_cycle.html

    Plus de deux ans plus tard... 🙂 personnellement, je ne recommande Outils de jQuery: flowplayer.org/tools/tabs/slideshow.html
    Mon scénario spécifique ne fonctionne pas avec le standard de jQuery slideshow de configuration qui définit d'images en ligne. J'ai précisément besoin des images pour être définie dans le css background-image la propriété en raison du diaporama les images étant plus grand que le contenu de la largeur (pas de barre de défilement horizontale). Cela permet de compenser un dégradé qui s'étend au-delà de la 960px largeur de la page. Je vais partager un exemple demain lorsque vous êtes prêt.
    Les Outils de jQuery slideshow, on utilise généralement divs pour le contenu de l'onglet (mais ça peut être n'importe quel élément HTML que vous spécifiez). Vous pouvez définir background-image tout ce que vous voulez.

    OriginalL'auteur Eddie