Sujet Précédent Sujet Suivant

Slide show en javascript

Fermé
Pomme87 Messages postés 38 Date d'inscription vendredi 22 juillet 2011 Statut Membre Dernière intervention 4 décembre 2011 - 1 déc. 2011 à 19:04
vordano Messages postés 1682 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 20 juillet 2012 - 1 déc. 2011 à 19:20
Bonjour,
L'idée est de faire un slide-show des articles dans mon site. Le truc, c'est que je veux en plus de ce qui est déjà écrit dans le script, ajouter à côté une liste des titres avec leurs liens. Mais je bute là-dessus, j'arrive pas à récupérer uniquement les titres...

Merci d'avance de votre aide

Voilà le script actuel :
var number = 1;
while (number < 5)
{
nomDeDiv = 'extraitArticle' + number;
div = document.getElementById(nomDeDiv);
div = div.innerHTML;
document.getElementById(number).innerHTML = div;
number++;
}


var numberTwo = 0;
var numeroDactu = 0;
function fonctionChangerDetat()
{
if (numeroDactu >= 4)
{
numeroDactu = 1;
}
else
{
numeroDactu = numeroDactu + 1;
}

var madiv;
var numberTwo = 1;
var numeroDiv = 1;
while (numberTwo < 5)
{
madiv = document.getElementById(numberTwo);
madiv.style.display = 'none';
numberTwo++;
numeroDiv++;
}
document.getElementById(numeroDactu).style.display = 'block';
numberTwo = 0;
numerodiv = 0;
setTimeout(fonctionChangerDetat, 2000);
}

fonctionChangerDetat();

Le script est en lien avec ce bout de code html :

<div class="articles extraits">
<div>
<div class="before_articles">
<div class="pagination center">




<b class="currentPage">1</b>
<a href="http://www.snow-station.ch/4-index.html" class="nextPage">2</a>
<a href="http://www.snow-station.ch/8-index.html" class="nextPage">3</a>
<a href="http://www.snow-station.ch/12-index.html" class="nextPage">4</a>
<a href="http://www.snow-station.ch/16-index.html" class="nextPage">5</a>
<a href="http://www.snow-station.ch/20-index.html" class="nextPage">6</a>
<a href="http://www.snow-station.ch/24-index.html" class="nextPage">7</a>
<a href="http://www.snow-station.ch/28-index.html" class="nextPage">8</a>
<a href="http://www.snow-station.ch/32-index.html" class="nextPage">9</a>

<!-- next page -->
<a href="http://www.snow-station.ch/4-index.html" rel="next" class="textNext">suivant</a>

<!--last page -->
<a href="http://www.snow-station.ch/116-index.html" class="textLast">fin</a>
</div>
</div>
<div class="extraitArticle article_summary_even " id="extraitArticle1">
<div class="dateExtrait">
</div>
<div class="infoExtrait">
<span class="titreExtrait"><a href="http://www.snow-station.ch/article-ski-au-cine-90216562.html" class="titreExtrait">Ski au ciné !</a></span>
</div>
<hr class="hrExtrait">
<div class="extrait">
<a href="http://www.snow-station.ch/article-ski-au-cine-90216562.html">
<img class="imgExtraitCon" src="http://a53.idata.over-blog.com/150x150/3/69/61/96/IMG_3835.JPG" alt="">
</a>
<br>
<div class="clear"></div>
</div>


<div class="clear"></div>

<div class="socialShare ">

<ul>


<li class="shareitem small twitter">
<iframe src="http://platform.twitter.com/...!%20-%20FeelTheRookies%20existe%20depuis%20d%C3%A9cembre%202010.%20S%C3%A9bastien%20Rey%20et%20Julien%20Dewarrat%20en%20sont%20les%E2%80%A6&url=http%3A%2F%2Fwww.snow-station.ch%2Farticle-ski-au-cine-90216562.html%23fromTwitter" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-horizontal" style="width: 118px; height: 20px; " title="Twitter pour votre site web : bouton "Tweeter""></iframe>
</li>

<li class="shareitem small facebook fr_FR">
<fb:like href="http://www.snow-station.ch/article-ski-au-cine-90216562.html" send="false" layout="button_count" width="100px" show_faces="false" class=" fb_edge_widget_with_comment fb_iframe_widget"><span><iframe id="f267167cc" name="f1872bc134" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 20px; width: 100px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; " title="Like this content on Facebook." class="fb_ltr" src="https://www.facebook.com/plugins/like.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df3790789c4%26origin%3Dhttp%253A%252F%252Fwww.snow-station.ch%252Ff3399bbd%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&href=http%3A%2F%2Fwww.snow-station.ch%2Farticle-ski-au-cine-90216562.html&layout=button_count&locale=fr_FR&node_type=link&sdk=joey&send=false&show_faces=false&width=100"></iframe></span></fb:like>
</li>


</ul>


</div>

<div class="clear"></div>


<div class="plusExtrait">
<br>

<span style="display: none" id="nbComm90216562">
0 </span>


<span class="spanLinkComment" style="display: none; " id="spanLinkCommentSingulier90216562">
<a href="http://www.snow-station.ch/article-ski-au-cine-90216562-comments.html#anchorComment" class="linkComment">Commentaire : 1</a>
</span>

<span class="spanLinkComment" id="spanLinkCommentPluriel90216562" style="display: none; ">
<a href="http://www.snow-station.ch/article-ski-au-cine-90216562-comments.html#anchorComment" class="linkComment">Commentaires : 0</a>
</span>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
var nbCom = parseInt( document.getElementById('nbComm90216562').innerHTML ); var spanCom = document.getElementById( 'spanLinkCommentSingulier90216562' ); var spanComs = document.getElementById( 'spanLinkCommentPluriel90216562' ); switch (nbCom) { case 0: spanCom.style.display = 'none'; spanComs.style.display = 'none'; break; case 1: spanCom.style.display = 'inline'; spanComs.style.display = 'none'; break; default: spanCom.style.display = 'none'; spanComs.style.display = 'inline'; }
//]]>
</script>
<span class="publishedBy">
<span class="separator">-</span>
Par Christian Gasser </span>
</div>
</div>
<div class="extraitArticle article_summary_odd " id="extraitArticle2">
<div class="dateExtrait">
</div>
<div class="infoExtrait">
<span class="titreExtrait"><a href="http://www.snow-station.ch/article-report-du-slide-n-sound-89396186.html" class="titreExtrait">Report du Slide'N Sound</a></span>
</div>
<hr class="hrExtrait">
<div class="extrait">
<a href="http://www.snow-station.ch/article-report-du-slide-n-sound-89396186.html">
<img class="imgExtraitCon" src="http://a52.idata.over-blog.com/150x150/3/69/61/96/DSC05465.JPG" alt="">
</a>
<br>
<div class="clear"></div>
</div>


<div class="clear"></div>

<div class="socialShare ">

<ul>


<li class="shareitem small twitter">
<iframe src="http://platform.twitter.com/...!%20Tout%20droit%20sur%20l'avenue%E2%80%A6&url=http%3A%2F%2Fwww.snow-station.ch%2Farticle-report-du-slide-n-sound-89396186.html%23fromTwitter" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-horizontal" style="width: 118px; height: 20px; " title="Twitter pour votre site web : bouton "Tweeter""></iframe>
</li>

<li class="shareitem small facebook fr_FR">
<fb:like href="http://www.snow-station.ch/article-report-du-slide-n-sound-89396186.html" send="false" layout="button_count" width="100px" show_faces="false" class=" fb_edge_widget_with_comment fb_iframe_widget"><span><iframe id="f279960418" name="f1ec6f8f48" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 20px; width: 100px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; " title="Like this content on Facebook." class="fb_ltr" src="https://www.facebook.com/plugins/like.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df516facc%26origin%3Dhttp%253A%252F%252Fwww.snow-station.ch%252Ff3399bbd%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&href=http%3A%2F%2Fwww.snow-station.ch%2Farticle-report-du-slide-n-sound-89396186.html&layout=button_count&locale=fr_FR&node_type=link&sdk=joey&send=false&show_faces=false&width=100"></iframe></span></fb:like>
</li>


</ul>


</div>

<div class="clear"></div>


<div class="plusExtrait">
<br>

<span style="display: none" id="nbComm89396186">
0 </span>


<span class="spanLinkComment" style="display: none; " id="spanLinkCommentSingulier89396186">
<a href="http://www.snow-station.ch/article-report-du-slide-n-sound-89396186-comments.html#anchorComment" class="linkComment">Commentaire : 1</a>
</span>

<span class="spanLinkComment" id="spanLinkCommentPluriel89396186" style="display: none; ">
<a href="http://www.snow-station.ch/article-report-du-slide-n-sound-89396186-comments.html#anchorComment" class="linkComment">Commentaires : 0</a>
</span>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
var nbCom = parseInt( document.getElementById('nbComm89396186').innerHTML ); var spanCom = document.getElementById( 'spanLinkCommentSingulier89396186' ); var spanComs = document.getElementById( 'spanLinkCommentPluriel89396186' ); switch (nbCom) { case 0: spanCom.style.display = 'none'; spanComs.style.display = 'none'; break; case 1: spanCom.style.display = 'inline'; spanComs.style.display = 'none'; break; default: spanCom.style.display = 'none'; spanComs.style.display = 'inline'; }
//]]>
</script>
<span class="publishedBy">
<span class="separator">-</span>
Par Christian Gasser </span>
</div>
</div>
<div class="extraitArticle article_summary_even " id="extraitArticle3">
<div class="dateExtrait">
</div>
<div class="infoExtrait">
<span class="titreExtrait"><a href="http://www.snow-station.ch/article-eclate-toi-89385547.html" class="titreExtrait">Éclate-toi !</a></span>
</div>
<hr class="hrExtrait">
<div class="extrait">
<a href="http://www.snow-station.ch/article-eclate-toi-89385547.html">
<img class="imgExtraitCon" src="http://resize.over-blog.com/150x150.png?~aHR0cDovL2ltZy55b3V0dWJlLmNvbS92aS91OE9uQXFHY0w1NC8wLmpwZw==" alt="">
</a>
<br>
<div class="clear"></div>
</div>


<div class="clear"></div>

<div class="socialShare ">

<ul>


<li class="shareitem small twitter">
<iframe src="http://platform.twitter.com/widgets/tweet_button.html#_=1322760053293&count=horizontal&id=twitter_tweet_button_4&lang=fr&original_referer=http%3A%2F%2Fwww.snow-station.ch%2F&text=%C3%89clate-toi%20!%20-%20%22%C3%89clate-toi%20!%22%20est%20la%20phrase%20culte%20des%20trois%20juges%20du%20Valais%20a%20un%20incroyable%20talent.%20En%20effet%2C%E2%80%A6&url=http%3A%2F%2Fwww.snow-station.ch%2Farticle-eclate-toi-89385547.html%23fromTwitter" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-horizontal" style="width: 118px; height: 20px; " title="Twitter pour votre site web : bouton "Tweeter""></iframe>
</li>

<li class="shareitem small facebook fr_FR">
<fb:like href="http://www.snow-station.ch/article-eclate-toi-89385547.html" send="false" layout="button_count" width="100px" show_faces="false" class=" fb_edge_widget_with_comment fb_iframe_widget"><span><iframe id="f29609b214" name="f50e48638" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 20px; width: 100px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; " title="Like this content on Facebook." class="fb_ltr" src="https://www.facebook.com/plugins/like.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df24ed53034%26origin%3Dhttp%253A%252F%252Fwww.snow-station.ch%252Ff3399bbd%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&href=http%3A%2F%2Fwww.snow-station.ch%2Farticle-eclate-toi-89385547.html&layout=button_count&locale=fr_FR&node_type=link&sdk=joey&send=false&show_faces=false&width=100"></iframe></span></fb:like>
</li>


</ul>


</div>

<div class="clear"></div>


<div class="plusExtrait">
<br>

<span style="display: none" id="nbComm89385547">
1 </span>


<span class="spanLinkComment" style="display: inline; " id="spanLinkCommentSingulier89385547">
<a href="http://www.snow-station.ch/article-eclate-toi-89385547-comments.html#anchorComment" class="linkComment">Commentaire : 1</a>
</span>

<span class="spanLinkComment" id="spanLinkCommentPluriel89385547" style="display: none; ">
<a href="http://www.snow-station.ch/article-eclate-toi-89385547-comments.html#anchorComment" class="linkComment">Commentaires : 1</a>
</span>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
var nbCom = parseInt( document.getElementById('nbComm89385547').innerHTML ); var spanCom = document.getElementById( 'spanLinkCommentSingulier89385547' ); var spanComs = document.getElementById( 'spanLinkCommentPluriel89385547' ); switch (nbCom) { case 0: spanCom.style.display = 'none'; spanComs.style.display = 'none'; break; case 1: spanCom.style.display = 'inline'; spanComs.style.display = 'none'; break; default: spanCom.style.display = 'none'; spanComs.style.display = 'inline'; }
//]]>
</script>
<span class="publishedBy">
<span class="separator">-</span>
Par Christian Gasser </span>
</div>
</div>
<div class="extraitArticle article_summary_odd " id="extraitArticle4">
<div class="dateExtrait">
</div>
<div class="infoExtrait">
<span class="titreExtrait"><a href="http://www.snow-station.ch/article-les-94-photos-du-centieme-89079992.html" class="titreExtrait">Les 94 photos du centième</a></span>
</div>
<hr class="hrExtrait">
<div class="extrait">
<a href="http://www.snow-station.ch/article-les-94-photos-du-centieme-89079992.html">
<img class="imgExtraitCon" src="http://a52.idata.over-blog.com/150x150/3/69/61/96/centiemeCransMontana/imagesNatal68.jpg" alt="">
</a>
<br>
<div class="clear"></div>
</div>


<div class="clear"></div>

<div class="socialShare ">

<ul>


<li class="shareitem small twitter">
<iframe src="http://platform.twitter.com/...!%20Le%20vrai%20hiver%20avec%20de%20la%20neige.%20Pas%20un%20nuage%20%C3%A0%20l'horizon%2C%E2%80%A6&url=http%3A%2F%2Fwww.snow-station.ch%2Farticle-les-94-photos-du-centieme-89079992.html%23fromTwitter" allowtransparency="true" frameborder="0" scrolling="no" class="twitter-share-button twitter-count-horizontal" style="width: 118px; height: 20px; " title="Twitter pour votre site web : bouton "Tweeter""></iframe>
</li>

<li class="shareitem small facebook fr_FR">
<fb:like href="http://www.snow-station.ch/article-les-94-photos-du-centieme-89079992.html" send="false" layout="button_count" width="100px" show_faces="false" class=" fb_edge_widget_with_comment fb_iframe_widget"><span><iframe id="f3294fed1" name="f231ca47d8" scrolling="no" style="border-width: initial; border-color: initial; overflow-x: hidden; overflow-y: hidden; height: 20px; width: 100px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; " title="Like this content on Facebook." class="fb_ltr" src="https://www.facebook.com/plugins/like.php?channel_url=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%3Fversion%3D3%23cb%3Df3820aa168%26origin%3Dhttp%253A%252F%252Fwww.snow-station.ch%252Ff3399bbd%26relation%3Dparent.parent%26transport%3Dpostmessage&extended_social_context=false&href=http%3A%2F%2Fwww.snow-station.ch%2Farticle-les-94-photos-du-centieme-89079992.html&layout=button_count&locale=fr_FR&node_type=link&sdk=joey&send=false&show_faces=false&width=100"></iframe></span></fb:like>
</li>


</ul>


</div>

<div class="clear"></div>


<div class="plusExtrait">
<br>

<span style="display: none" id="nbComm89079992">
0 </span>


<span class="spanLinkComment" style="display: none; " id="spanLinkCommentSingulier89079992">
<a href="http://www.snow-station.ch/article-les-94-photos-du-centieme-89079992-comments.html#anchorComment" class="linkComment">Commentaire : 1</a>
</span>

<span class="spanLinkComment" id="spanLinkCommentPluriel89079992" style="display: none; ">
<a href="http://www.snow-station.ch/article-les-94-photos-du-centieme-89079992-comments.html#anchorComment" class="linkComment">Commentaires : 0</a>
</span>

<script type="text/javascript" charset="utf-8">
//<![CDATA[
var nbCom = parseInt( document.getElementById('nbComm89079992').innerHTML ); var spanCom = document.getElementById( 'spanLinkCommentSingulier89079992' ); var spanComs = document.getElementById( 'spanLinkCommentPluriel89079992' ); switch (nbCom) { case 0: spanCom.style.display = 'none'; spanComs.style.display = 'none'; break; case 1: spanCom.style.display = 'inline'; spanComs.style.display = 'none'; break; default: spanCom.style.display = 'none'; spanComs.style.display = 'inline'; }
//]]>
</script>
<span class="publishedBy">
<span class="separator">-</span>
Par Christian Gasser </span>
</div>
</div>



<div class="after_articles"> <div class="pagination center">




<b class="currentPage">1</b>
<a href="http://www.snow-station.ch/4-index.html" class="nextPage">2</a>
<a href="http://www.snow-station.ch/8-index.html" class="nextPage">3</a>
<a href="http://www.snow-station.ch/12-index.html" class="nextPage">4</a>
<a href="http://www.snow-station.ch/16-index.html" class="nextPage">5</a>
<a href="http://www.snow-station.ch/20-index.html" class="nextPage">6</a>
<a href="http://www.snow-station.ch/24-index.html" class="nextPage">7</a>
<a href="http://www.snow-station.ch/28-index.html" class="nextPage">8</a>
<a href="http://www.snow-station.ch/32-index.html" class="nextPage">9</a>

<!-- next page -->
<a href="http://www.snow-station.ch/4-index.html" rel="next" class="textNext">suivant</a>

<!--last page -->
<a href="http://www.snow-station.ch/116-index.html" class="textLast">fin</a>
</div>
</div>
</div>
</div>


A voir également:

1 réponse

Réponse 1 / 1
vordano Messages postés 1682 Date d'inscription mardi 12 juillet 2011 Statut Membre Dernière intervention 20 juillet 2012 316
1 déc. 2011 à 19:20
bonsoir,

tout ce code, c'est assez indigeste :s

est ce que tu as cherché du coté du jquery ?
il existe aussi une librairie ajax appellé fancybox qui permet de faire des trucs simpa comme un slideshow
0

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Impossible de lire les films streaming!!!!
Le-psy-79 -
ronaldo -

10 réponses
arnaque show cam
Utilisateur anonyme -
Apasdamypincom -

11 réponses
Créer un site de Live show comme Eurolive
awesomeguyaw -
bg62 -

5 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses