Visualizzazione dei risultati da 1 a 4 su 4

Discussione: slide non funzionante

  1. #1
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    44

    slide non funzionante

    ho messo una slide in modo che cambi ogni volta....ma nella pagine ce nesono altre 3, come mai le altre non funzionano ma funziona solo la prima...
    incollo il codice grazie

    codice:
    <section id="content">
        <div class="content-line"></div>
            <div class="main">
                <div class="container_12">                
                    <div class="wrapper p11">
                        <article class="grid_12">
                            <div class="page3-box1">
                                <h3 class="p2">Luxury Rooms</h3>
                                <div class="tabs-box">
                                <ul class="tabs">[*]Rosa[*]verde[*]giallo[*]blu[/list]
                                <div class="clear"></div>
                                  <div class="tab_container">
                                  <div id="tab1" class="tab_content">
                                    <div class="tab-bg"> 
                                        <figure class="page3-img1"><div id="slideshow">
    	[img]slide/rosa/terra.jpg[/img]
    	[img]slide/rosa/fuoco.jpg[/img]
    	[img]slide/rosa/aria.jpg[/img]
    	[img]slide/rosa/acqua.jpg[/img]
    </div></figure>
                                        <div class="extra-wrap" style="margin-top: 0px; border-top-width: 0px; padding-top: 54px;">
                                            <span>Rosa In Velit Vel Ipsum Auctor Pulvinar</span>
                                            <p class="indent-bot">Congue fermentum auris accums an nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim.</p>
        <p class="p10">Vestibulum sed ante. Donec sagittis euismod purus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
                                            <ul class="list1">[*]40-45m²[*]Balcony or terrace[*]Large bathroom with bathtub or shower[*]Separate WC[*]Room safe[*]One bedroom[*]Large living area[*]32" flatscreen TV, telephone, Wi-Fi[/list]
                                        </div>     
                                    </div>
                                  </div> 
                                  <div id="tab2" class="tab_content">
                                    <div class="tab-bg"> 
                                        <figure class="page3-img1"><div id="slideshow">
    	[img]slide/verde/terra.jpg[/img]
    	[img]slide/verde/fuoco.jpg[/img]
    	[img]slide/verde/aria.jpg[/img]
    	[img]slide/verde/acqua.jpg[/img]
    </div></figure>
                                        <div class="extra-wrap" style="margin-top: 0px; border-top-width: 0px; padding-top: 54px;">
                                            <span>Verde In Velit Vel Ipsum Auctor Pulvinar</span>
                                            <p class="indent-bot">Congue fermentum auris accums an nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim.</p>
        <p class="p10">Vestibulum sed ante. Donec sagittis euismod purus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
                                            <ul class="list1">[*]40-45m²[*]Balcony or terrace[*]Large bathroom with bathtub or shower[*]Separate WC[*]Room safe[*]One bedroom[*]Large living area[*]32" flatscreen TV, telephone, Wi-Fi[/list]
                                        </div>     
                                    </div>
                                  </div>
                                  <div id="tab3" class="tab_content">
                                    <div class="tab-bg"> 
                                        <figure class="page3-img1"><div id="slideshow">
    	[img]slide/giallo/terra.jpg[/img]
    	[img]slide/giallo/fuoco.jpg[/img]
    	[img]slide/giallo/aria.jpg[/img]
    	[img]slide/giallo/acqua.jpg[/img]
    </div></figure>
                                        <div class="extra-wrap" style="margin-top: 0px; border-top-width: 0px; padding-top: 54px;">
                                            <span>Giallo In Velit Vel Ipsum Auctor Pulvinar</span>
                                            <p class="indent-bot">Congue fermentum auris accums an nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim.</p>
        <p class="p10">Vestibulum sed ante. Donec sagittis euismod purus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
                                            <ul class="list1">[*]40-45m²[*]Balcony or terrace[*]Large bathroom with bathtub or shower[*]Separate WC[*]Room safe[*]One bedroom[*]Large living area[*]32" flatscreen TV, telephone, Wi-Fi[/list]
                                        </div>     
                                    </div>
                                  </div>
                                  <div id="tab4" class="tab_content">
                                    <div class="tab-bg"> 
                                        <figure class="page3-img1"><div id="slideshow">
    	[img]slide/blu/terra.jpg[/img]
    	[img]slide/blu/fuoco.jpg[/img]
    	[img]slide/blu/aria.jpg[/img]
    	[img]slide/blu/acqua.jpg[/img]
    	
    	
    	
    </div></figure>
                                        <div class="extra-wrap" style="margin-top: 0px; border-top-width: 0px; padding-top: 54px;">
                                            <span>Blu In Velit Vel Ipsum Auctor Pulvinar</span>
                                            <p class="indent-bot">Congue fermentum auris accums an nulla vel diam. Sed in lacus ut enim adipiscing aliquet. Nulla venena tis. In pede mi, aliquet sit amet, euismod in, auctor ut, ligula. Aliquam dapibus tincidunt metus. Praesent justo dolor, lobortis quis, lobortis dignissim.</p>
        <p class="p10">Vestibulum sed ante. Donec sagittis euismod purus. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo.</p>
                                            <ul class="list1">[*]40-45m²[*]Balcony or terrace[*]Large bathroom with bathtub or shower[*]Separate WC[*]Room safe[*]One bedroom[*]Large living area[*]32" flatscreen TV, telephone, Wi-Fi[/list]
                                        </div>     
                                    </div>
                                  </div>            
                                  </div>
                              </div>
                            </div>
                        </article>
                    </div>
                    <div class="wrapper p13">
                        <article class="grid_4">
                                <div class="page1-box1">
                                    <div class="inner">
                                        <div class="inner1">
                                            <h2>Wi-Fi</h2>
                                             <p class="p12">NEW! All our rooms now offer free wireless internet. The perfect way to check your emails while on holiday!</p> 
                                        </div>
                                    </div>
                                </div>                        
                        </article>
                        <article class="grid_4">
                                <div class="page1-box1">
                                    <div class="inner">
                                        <div class="inner1">
                                            <h2>rosa</h2>
                                           <p class="p12">Many of our rooms are equipped with flatscreen TVs, most with screen sizes between 27" and 32".</p>
                                        </div>
                                    </div>
                                </div>                        
                        </article>
                        <article class="grid_4">
                                <div class="page1-box1">
                                    <div class="inner">
                                        <div class="inner1">
                                            <h2>Keycard</h2>
                                            <p class="p12">Keys are a thing of the past! All guests at our hotel are provided with keycards to open and lock their rooms.</p>
                                        </div>
                                    </div>
                                </div>                        
                        </article>
                    </div>
                </div>
            </div>
        </section>

  2. #2
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,784
    stai usando una sintassi html5, spiega perché scrivi qui in (x)html

    dov'è lo script che fa girare le immagini?

  3. #3
    Utente di HTML.it
    Registrato dal
    Aug 2012
    Messaggi
    44

    sono 1 newbye scusa

    sono 1 newbye scusa, ti incollo il codice java:
    codice:
    window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
    
    var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
    
    function so_init()
    {
    	if(!d.getElementById || !d.createElement)return;
    
    	css = d.createElement('link');
    	css.setAttribute('href','slideshow2.css');
    	css.setAttribute('rel','stylesheet');
    	css.setAttribute('type','text/css');
    	d.getElementsByTagName('head')[0].appendChild(css);
    
    	imgs = d.getElementById('slideshow').getElementsByTagName('img');
    	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
    	imgs[0].style.display = 'block';
    	imgs[0].xOpacity = .99;
    
    	setTimeout(so_xfade,3000);
    }
    
    function so_xfade()
    {
    	cOpacity = imgs[current].xOpacity;
    	nIndex = imgs[current+1]?current+1:0;
    	nOpacity = imgs[nIndex].xOpacity;
    
    	cOpacity-=.05;
    	nOpacity+=.05;
    
    	imgs[nIndex].style.display = 'block';
    	imgs[current].xOpacity = cOpacity;
    	imgs[nIndex].xOpacity = nOpacity;
    
    	setOpacity(imgs[current]);
    	setOpacity(imgs[nIndex]);
    
    	if(cOpacity<=0)
    	{
    		imgs[current].style.display = 'none';
    		current = nIndex;
    		setTimeout(so_xfade,3000);
    	}
    	else
    	{
    		setTimeout(so_xfade,50);
    	}
    
    	function setOpacity(obj)
    	{
    		if(obj.xOpacity>.99)
    		{
    			obj.xOpacity = .99;
    			return;
    		}
    
    		obj.style.opacity = obj.xOpacity;
    		obj.style.MozOpacity = obj.xOpacity;
    		obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
    	}
    }

    ti e sufficente?? o ti serve altro, se si dimmelo
    ciao

  4. #4
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    19,784
    riepiloghiamo...

    quello che devi muovere è questo:
    codice:
    <figure class="page3-img1"><div id="slideshow">
    	[img]slide/verde/terra.jpg[/img]
    	[img]slide/verde/fuoco.jpg[/img]
    	[img]slide/verde/aria.jpg[/img]
    	[img]slide/verde/acqua.jpg[/img]
    </div></figure>
    e lo fai tramite javascript, non java (che son cose diverse).
    ho però l'impressione che tu abbia semplicemente inserito lo script (non si sa dove spero in <head>) senza verificarne le funzionalità.
    ti suggerisco di fare delle prove utilizzando gli esempi originali dal quale hai preso lo slider, così anche apprendi meglio il meccanismo

    sposto su JS.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.