Scorrimento immagini nel tag section

[Giovanni255]

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]

Così dovrebbe funzionare... ma non è la soluzione ottimale...

<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]

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

 

[f107]

Si è tutto css,
ma a questo punto non ti conviene usare un plugin di scorrimento immagini? (http://www.basic-slider.com/)

 

[Giovanni255]

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

 

[f107]

Per fare effetti grafici devi necessariamente utilizzare del css....
http://responsiveslides.com/ puoi prendere spunto da questo se vuoi.

 

[Giovanni255]

Ok grazie mille ancora. Appena riesco provo e ti faccio sapere!!

 

[Giovanni255]

<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!

 

[Giovanni255]

A parte che non ho capito quali file devo scaricare di questa pagina: http://responsiveslides.com/

 

[f107]

Nel codice che hai postato ci sono parecchi errori di sintassi, guarda qui http://responsiveslides.com/with-captions/themes.html c'è una semplice pagina html con la demo dello slider, se guardi il sorgente trovi sia che file ti servono che trovi anche qui http://responsiveslides.com/, scorri fino ad Usage, il primo punto.

Ciao ciao

A parte che non ho capito quali file devo scaricare di questa pagina: http://responsiveslides.com/

 

[Giovanni255]

ciao, ho trovato quello che cercavo ma ho un problemino: non riesco ad allineare il div al centro. Ti posto il codice

<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

#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

 

[cory]

e questo il css

#slide{
    overflow:hidden;
    width:600px;height:300px;
    position:relative;
    [B]margin: 0 auto;   [/B]
    background: white;
    box-shadow:0px 0px 5px black;
   }

Grazie ancora

c'è una virgola di troppo e puoi anche omettere l'unità di misura

 

[Giovanni255]

Grazie mille!!! E grazie anche a F107 che mi ha assistito!