Benvenuto su Oceano Risorse per Webmasters
Modules
· Home
· Argomenti
· Backgrounds
· Banners
· Colorhex
· Downloads
· Fonts
· Gallery
· Gif Animate
· Javascripts
· Manuali
· Recommend Us
· Themes
· Wallpapers
· Web Links
Gallery



Partners
Hosting gratuito

Open Source software development website

HTML.it - il portale italiano sul web publishing

Gratis.it

Dynamic Drive - DHTML code library

BOORP - archivio di risorse gratuite
Shinystat
 
Grafica Carousel Slideshow
Postato da webmaster il Wednesday, 16 November @ 19:20:23 CET
Contributo di webmaster

Carousel slideshow è uno script che riproduce uno slideshow di immagini in stile carosello. Alcune altre caratteristiche di questa presentazione sono che lo slideshow può essere impostato per ruotare sia verso destra che verso sinistra, ogni immagine può avere un collegamento opzionale ad essa associato, lo slideshow va in pausa al passaggio del mouse sulle immagini.

Procediamo inserendo il codice javascript tra i tags <head> della pagina:

<!-- INIZIO CODICE -->

<script type="text/javascript">
var Car_Image_Width=200;
var Car_Image_Height=150;
var Car_Border=true;
var Car_Border_Color="#000000";
var Car_Speed=4;
var Car_Direction=true;
var Car_NoOfSides=8;

Car_Image_Sources=new Array()
Car_Image_Sources[0]="1.jpg"
Car_Image_Sources[1]="# "
Car_Image_Sources[2]="2.jpg"
Car_Image_Sources[3]="#"
Car_Image_Sources[4]="3.jpg"
Car_Image_Sources[5]="#"
Car_Image_Sources[6]="4.jpg"
Car_Image_Sources[7]="#"
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].onclick=C_LdLnk;
CW_I[i].onmouseover=C_Stp;
CW_I[i].onmouseout=C_Rstrt}
CarImages()}}

function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)}

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>

<!-- FINE CODICE -->

Adesso inseriamo il gestore di eventi onload nel tag <body>:

<body onload="Carousel()">

Per ultimo, nel corpo della pagina, tra i tags <body>, inseriamo il codice html del <div> che richiama lo script, nel punto esatto in cui vogliamo visualizzare lo slideshow.

<div id="Carousel" style="position:relative">
<img src="1.jpg" width="200" height="150"></div>

La personalizzazione è semplicissima, basta agire sulle 7 variabili all'inizio dello script.

Vediamole:

var Car_Image_Width=200;
definisce la larghezza delle immagini

var Car_Image_Height=150;
definisce l'altezza delle immagini

var Car_Border=true;
consente di specificare se si vuole visualizzare un bordo sulle immagini, i valori sono true per visualizzarlo e false per visualizzare le immagini senza bordo

var Car_Border_Color="#000000";
definisce il colore del bordo se impostato a true

var Car_Speed=4;
definisce la velocità di transizione

var Car_Direction=true;
definisce la direzione di scorrimento delle immagini, i valori sono true per impostare la direzione a sinistra e false per impostarla a destra

var Car_NoOfSides=8;
definisce il numero di lati.

Il percorso alle immagini e il relativo link vanno definiti nell'array:

Car_Image_Sources=new Array()
Car_Image_Sources[0]="1.jpg"
Car_Image_Sources[1]="#" // quì puoi inserire un link al posto del cancelletto
Car_Image_Sources[2]="2.jpg"
Car_Image_Sources[3]="#"
Car_Image_Sources[4]="3.jpg"
Car_Image_Sources[5]="#"
Car_Image_Sources[6]="4.jpg"
Car_Image_Sources[7]="#"


 
Links Correlati
· Indice Grafica
· Inoltre Grafica
· News by webmaster


Articolo più letto relativo a Grafica:
Immagine che si illumina al passaggio del mouse

Valutazione Articolo
Average Score: 5
Voti: 1


Please take a second and vote for this article:

Eccellente
Molto Buono
Buono
Regolare
Cattivo

Opzioni

 Pagina Stampabile Pagina Stampabile

Associated Topics

GraficaJavascript

Spiacente, non sono disponibili i commenti per questo articolo.




Questo sito è ospitato gratuitamente da Altervista
Tutti i logos e i marchi presenti in questo sito sono dei loro proprietari.
I commenti sono proprietà  di chi li ha postati, tutto il resto © 2002 by Oceano Risorse per Webmasters
PHP-Nuke Copyright © 2005 by Francisco Burzi. This is free software, and you may redistribute it under the GPL. PHP-Nuke comes with absolutely no warranty, for details, see the license.
Generazione pagina: 0.05 Secondi

Theme by

© Oceanoweb