slide una alla volta

**bANART** · 02-02-2012, 16:09

Ciao a tutti.
Chiedo agli esperti di questa sezione.

Dovrei realizzare uno slide di immagini che scorrono una per volta... mi spiego meglio.
Nel sito ci sarà una fascia di un tot di immagini (per esempio 5), e una serie di immagini nascoste che vengono visualizzate una per volta al cliccare della freccia.

Ho pensato ad un div in un div.
Il primo fa da maschera in modo da nascondere ciò che va in eccesso (nel css: overflow: hidden)
Il secondo contiene tutte le immagini.
Quando si preme la freccia di destra il div di "sotto" (quello delle immagini) si sposta della misura di un'immagine verso sinistra in modo da nascondere la prima e mostrare la sesta.
Così via continuando a premere il tasto destro.

Quando però viene mostrata l'ultima immagine la freccia destra verrà inibita.
la stessa cosa al contrario per la freccia sinistra.

Un'ultima cosa, il movimento dovrà essere fluido, ma per questo credo si possa fare anche in css.

Qualcuno può aiutarmi?

**bANART** · 02-02-2012, 17:36

Ragazzi!!! (sono mezzo orgoglione di me

)

Senza saper ne legere e ne scrivere sono arrivato a questo punto: Clicca quì.

Ora mi rimane da risolvere 2 punti...
il primo (e il più importante) è quello di "bloccare" lo script quando si arriva alla fine delle immagini, sia all'inizio sia alla fine.

Per intenderci, la freccia di sinistra, appena aperta la pagina, non deve spostare le immagini a destra (altrimenti crea il vuoto).
Così come quando si arriva alla visualizzazione dell'immagine 6 la freccia di destra deve smettere di funzionare.

Il secondo problema è quello di dare l'effetto di movimento fluido.

Riporto il codice che ho creato fino ad ora:

Codice PHP:


<!DOCTYPE html>

<html lang="en">

<head>

    <style>

        .masterBox{

            margin: 0 auto;

            width: 802px;

        }

    

        .firstBox{

            width: 740px;

            height: 200px;

            border: 1px solid #000;

            overflow: hidden;

            float: left;

        }

        

        .secondBox{

            width: 1200px;

            height: 300px;

            padding: 20px 0 20px 20px;

        }

        

        .secondBox img{

            float: left;

            margin-right: 20px;

        }

        

        .arrowLeft{

            width: 30px;

            height: 200px;

            line-height: 200px;

            float: left;

            text-align: center;

        }

        

        .arrowRight{

            width: 30px;

            height: 200px;

            line-height: 200px;

            float: left;

            text-align: center;

        }

    </style>

    

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>





    <script>

        mrg=0;

        function righrarrow () {

            mrg=mrg-180;

            $("#secondB").css("margin-left",mrg);

        }

        function leftrarrow () {

            mrg=mrg+180;

            $("#secondB").css("margin-left",mrg);

        }

    </script>

    

    

</head>



<body>

    

    <div class="masterBox">

        <div class="arrowLeft">

            <a href="javascript:leftrarrow();">

                <<

            </a>

        </div>

        <div class="firstBox">

            <div id="secondB" class="secondBox">

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/1.jpg[/img]

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/2.jpg[/img]

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/3.jpg[/img]

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/4.jpg[/img]

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/5.jpg[/img]

                [img]http://www.matteocoletta.it/magazzino/numeri_160x160/6.jpg[/img]

            </div>

        </div>

        <div class="arrowRight">

            <a href="javascript:righrarrow();">

                >>

            </a>

        </div>

    </div>







</body>

</html>

**bANART** · 02-02-2012, 18:12

Orgoglione all'80%!!!!

Sono arrivato ad evitare che sfori con le immagini:

http://www.matteocoletta.it/magazzino/slideex.html

Ma ora....
Qualcuno può aiutarmi a spostare le immagini non a scatto ma in maniera fluida?

**Xinod** · 02-02-2012, 19:15

$("#secondB").animate({"margin-left":mrg},'slow');

**bANART** · 02-02-2012, 19:24

Ciao Xinod!!
guarda, ho provato sia così:

Codice PHP:


<script>

        mrg=0;

        function righrarrow () {

            if(mrg>-900){

                mrg=mrg-180;

                $("#secondB").css("margin-left",mrg);

            }

        }

        function leftrarrow () {

            if(mrg!=0){

                mrg=mrg+180;

                $("#secondB").css("margin-left",mrg);

            }

        }

        $("#secondB").animate({"margin-left":mrg},'slow');

    </script>

...sia così...

Codice PHP:


<script>

        mrg=0;

        function righrarrow () {

            if(mrg>-900){

                mrg=mrg-180;

                $("#secondB").css("margin-left",mrg).animate({"margin-left":mrg},'slow');

            }

        }

        function leftrarrow () {

            if(mrg!=0){

                mrg=mrg+180;

                $("#secondB").css("margin-left",mrg).animate({"margin-left":mrg},'slow');

            }

        }

    </script>

..ma non va

**bionicoz** · 02-02-2012, 19:59

Il metodo .css() applica la propietà senza animarla, il metodo .animate() come suggerisce il nome stesso, invece, anima questa transazione.
Insomma devi usare la riga di Xinod sostituendola alla tue due righe che fanno uso del metodo .css() e non aggiungerla.

http://api.jquery.com/css/
http://api.jquery.com/animate/

**bANART** · 02-02-2012, 20:07

Si, a dire il vero c'ero arrivato subito dopo...

ho fatto così:

Codice PHP:


<script>

        mrg=0;

        function righrarrow () {

            if(mrg>-900){

                mrg=mrg-180;

                //$("#secondB").css("margin-left",mrg);

                //$("#secondB").animate({"margin-left":mrg},'slow');

                $("#secondB").animate({"margin-left": mrg}, 100, 'easing');

            }

        }

        function leftrarrow () {

            if(mrg!=0){

                mrg=mrg+180;

                //$("#secondB").css("margin-left",mrg);

                //$("#secondB").animate({"margin-left":mrg},'slow');

                $("#secondB").animate({"margin-left": mrg}, 100, 'easing');

            }

        }

    </script>

..ma continua a non funziare...

**Enzaccio** · 02-02-2012, 21:44

Esse vui rippartire dall'incomincio per esere veramiente orscolioso di tes tesso, alora pérche le api di goghe e non fart' il miele dassolo ??!?

codice:

<!DOCTYPE html>
<html>
<head>
	<style>
	
		.firstBox{
			width: 740px;
			height: 200px;
			border: 1px solid #000;
			overflow: hidden;
			float: left;
		}
		
		.secondBox{
			width: 1200px;
			height: 300px;
			padding: 20px 0 20px 20px;
		}
		
		.secondBox img{
			float: left;
			margin-right: 20px;
		}
		
	</style>


	<script>
		mrg=0;
		function righrarrow () {
			if(mrg>-360){
				mrg=mrg-180;
				document.getElementById("secondB").style.marginLeft=mrg + "px";
alert(document.getElementById("secondB").style.marginLeft);
			}
		}
		function leftrarrow () {
			if(mrg!=0){
				mrg=mrg+180;
				document.getElementById("secondB").style.marginLeft=mrg + "px";
alert(document.getElementById("secondB").style.marginLeft);
			}
		}
	</script>
	
</head>

<body>
	
			&lt;&lt;

		<div class="firstBox">
			<div id="secondB" class="secondBox">

				
				
				
				
				
				
			</div>
		</div>
			&gt;&gt;


</body>
</html>

**bANART** · 02-02-2012, 21:54

CHEEEEEE!?!?!?! Spagnolo?

Avevo pensato che fosse obsoleto il file jQuery incluso, ma ho preferito prima cenare

Dopo cena (5 minuti fa) ho provato a cambiare il file jQuery incluse E FUNZIA BENEEEeeee!!!!

Grazie a tutti!

Ci vedremo moooolto presto

Discussione: slide una alla volta

Strumenti discussione

Ricerca discussione

Visualizza

slide una alla volta

Permessi di invio