Scorrimento immagini nel tag section

Giovanni255

Utente Attivo
29 Set 2015
38
2
0
Salve a tutti. Vorrei fare in modo che dentro il section compaiano delle immagini casuali. Ecco il codice da implementare:

<script>
immagini = ['../wp-content/img/Mat/Mat1.jpg', '../wp-content/img/Mat/Mat1.jpg'];
setInterval(function(){
document.getElementsByClassName("section") = immagini[Math.floor(Math.random()*immagini.length)];
},1000*3);
</script>


<section class="section" name="section"> </section>
<style type="text/css">
.section{
border: 1px solid gray;
}
</style>

Non capisco dove sbaglio. Grazie ancora
 

f107

Utente Attivo
7 Ago 2012
203
6
18
Roma
Così dovrebbe funzionare... ma non è la soluzione ottimale...
Codice:
<section class="section" name="section"> <img src='' id='imgRand' /> </section>
<style type="text/css">
.section{
border: 1px solid gray;
}
</style>

<script>
	elem = document.getElementById('imgRand')
	immagini = ['../wp-content/img/Mat/Mat1.jpg', '../wp-content/img/Mat/Mat2.jpg'];
	setInterval(function()
	{ 
		elem.src = immagini[Math.floor(Math.random()*immagini.length)]; 
		
	},1000*3);

</script>

Sarebbe meglio o caricarne una sola a caricamento immagini, o fare una sorta di slideshow...
Salve a tutti. Vorrei fare in modo che dentro il section compaiano delle immagini casuali. Ecco il codice da implementare:

<script>
immagini = ['../wp-content/img/Mat/Mat1.jpg', '../wp-content/img/Mat/Mat1.jpg'];
setInterval(function(){
document.getElementsByClassName("section") = immagini[Math.floor(Math.random()*immagini.length)];
},1000*3);
</script>


<section class="section" name="section"> </section>
<style type="text/css">
.section{
border: 1px solid gray;
}
</style>

Non capisco dove sbaglio. Grazie ancora
 

Giovanni255

Utente Attivo
29 Set 2015
38
2
0
Ciao, intanto ti ringrazio. Ti volevo chiedere due cose:
1) è possibile allineare le immagini al centro del tag section?
2) come posso creare qualche effetto di scorrimento tra un'immagine e l'altra?
Grazie ancora
 

Giovanni255

Utente Attivo
29 Set 2015
38
2
0
Ciao ti ringrazio ma io volevo una semplice funzione js. Non mi servono anche le frecce di scorrimento delle immagini e tutto quello che mettono in quel sito. Tu, per caso, sai scrivere questa funzione oppure mi puoi dare delle dritte? Grazie ancora
 

Giovanni255

Utente Attivo
29 Set 2015
38
2
0
HTML:
<ul class="rslides">
            <li><img src="wp-content/img/Home/Lobbie.jpg" alt=""></li>
            <li><img src="wp-content/img/Home/Mat1.jpg" alt=""></li>
            <li><img src="wp-content/img/Home/Mat1G.jpg" alt=""></li>
        </ul>
        
        
        
        <style>
            .rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0;
  }

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
  }

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;
  }

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;
  }
        
        
        
        
        </style>
        
        
        <script>
  $(function() {
    $(".rslides").responsiveSlides();{
       auto: true,             // Boolean: Animate automatically, true or false
  speed: 500,            // Integer: Speed of the transition, in milliseconds
  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
  pager: false,           // Boolean: Show pager, true or false
  nav: false,             // Boolean: Show navigation, true or false
  random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback
    }
  });
</script>

Ecco tutto il codice. Il problema è che rimane fissa la prima immagine e non cambia!
 

f107

Utente Attivo
7 Ago 2012
203
6
18
Roma

Giovanni255

Utente Attivo
29 Set 2015
38
2
0
ciao, ho trovato quello che cercavo ma ho un problemino: non riesco ad allineare il div al centro. Ti posto il codice
HTML:
<div id="slide" align="center">
            <img id="foto1" src="./wp-content/img/Home/Divisa.jpg" />
            <img id="foto2" src="./wp-content/img/Home/logo.jpg" />
        </div>
e questo il css
Codice:
#slide{
    overflow:hidden;
    width:600px;height:300px;
    position:relative;
    margin: 0px, auto;   
    background: white;
    box-shadow:0px 0px 5px black;
   }
   
   #slide p{
    font-family:Arial, sans-serif;
    font-size:150%;
    text-align:center;
    position:relative;
    width:200px;height:40px;
    top:200px;left:40px;
    padding:10px;
    background:rgba(20,20,20,0.5);
    color:white;
    opacity:0;
   }
   
   #slide img{
    width:100%;height:100%;
    position:absolute;
    top:0px;left:0px;
   }
   #slide:hover p{
    opacity:1;
   }

Grazie ancora
 
Discussioni simili
Autore Titolo Forum Risposte Data
Mer556 [Javascript] IMMAGINI A SCORRIMENTO, ANTEPRIMA 3 Javascript 1
asevenx plugin slider scorrimento immagini WordPress 2
A codice html al posto delle immagini in una finestra di scorrimento Javascript 0
B Script scorrimento orizzontale immagini linkabili - scorrimento al click su un < o > Javascript 0
G creare immagini a scorrimento, però sbaglio e mi si sovrappongono..aiutatemi Flash 1
C Script per lo scorrimento delle immagini Javascript 0
D [HTML] scorrimento dopo un'aggiunta di dati HTML e CSS 5
W [MS Access] Barre di scorrimento su maschere MS Access 0
A [Javascript] [CSS] elenco affiancato per evitare scorrimento pagina Javascript 4
S Problema scorrimento DIV Javascript 6
S Problema scorrimento DIV senza scrollbar HTML e CSS 4
N Scorrimento automatico TAB Javascript 5
K Script scorrimento notizie Javascript 2
A scorrimento all'interno database mysql riportando dati su form (tipo Dataset) Ajax 5
filippino Eliminare le barre scorrimento HTML e CSS 1
F come si rileva lo scorrimento del mouse in alto o in basso? Javascript 5
S DIV con scorrimento mouse HTML e CSS 1
Danyb82 Scorrimento immagine che si sviluppa orizontalmente jQuery 3
A Estrarre solo un certo numero di record e scorrimento pagine PHP 9
P Scorrimento array-pagine PHP 0
M Scorrimento solo di una parte di pagina - dreamweaver cs3 Webdesign e Grafica 1
M Scorrimento solo di una parte di pagina - dreamweaver cs3 HTML e CSS 0
A scorrimento orizzontale HTML e CSS 2
borgo italia barre scorrimento colorate HTML e CSS 7
P problema di scorrimento PHP 10
S menù laterale che segue lo scorrimento della pagina Javascript 6
R Creare pulsanti di scorrimento in flash e altre informazioni Flash 0
borgo italia scorrimento notizie Javascript 0
P scorrimento verticale notizie e col passaggio mouse si ferma Javascript 4
C scorrimento panoramica: qualità filmato Flash 2
Nyl Css - Barre di scorrimento colorate HTML e CSS 9
T barre di scorrimento HTML e CSS 2
B barra di scorrimento in tabella HTML e CSS 1
D Scorrimento pagina con javascript Javascript 0
B Settaggio freccie di scorrimento per filmato Flash 0
E pulsante di scorrimento Javascript Javascript 0
M Piccole finestrelle con barra di scorrimento HTML e CSS 1
A Colorare le barrette di scorrimento HTML e CSS 4
coteaz problema con iframe e con barre di scorrimento Javascript 3
B Larghezza pagina web / barra scorrimento impazzita? HTML e CSS 0
Firespit Barra di scorrimento in una tabella HTML e CSS 3
D barra scorrimento IFrame HTML e CSS 2
R HELP...problema con le barre di scorrimento! HTML e CSS 15
C Scorrimento Verticale Javascript 1
Eugene CSS per colorare barre di scorrimento - vietato? HTML e CSS 3
R Problema con FP 2003: bloccare scorrimento menu HTML e CSS 4
H Colorare le barre di scorrimento HTML e CSS 20
A Barre di scorrimento laterali HTML e CSS 12
N scorrimento pagine PHP 3
S Scorrimento parte pagina HTML e CSS 1

Discussioni simili