lunedì 19 settembre 2011

CYCLE

HEAD
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>


<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
  fx: 'fade' ,
speed:  '7000',
 });
});
</script>


HTML
<div class="slideshow" style="background: black; border-bottom: solid 1px black;">

<img id="im-palco" src="images/stories/fotosoi2.jpg" style="width: 100%;">
<img id="im-palco1" src="images/stories/fotosoi1.jpg" style="width: 100%;">
<img id="im-palco2" src="images/stories/fotosoi3.jpg" style="width: 100%;">
<img id="im-palco3" src="images/stories/foto_soi_5.jpg" style="width: 100%;">

</div>


TIMED ACTION

window.setInterval(yourfunction10000);

function yourfunction(alert('test')}




CICLO SUI LI
html
<div class="l" id="l1" style="float: left;">01</div>
<div class="l" id="l2"  style="float: left;">02</div>
<div class="l" id="l3"  style="float: left;">03</div>
    <div style="clear: both;"></div>
<div class="l" id="l4"  style="float: left;">04</div>
<div class="l" id="l5"  style="float: left;">05</div>
<div class="l" id="l6"  style="float: left;">06</div>
        <div style="clear: both;"></div>
<div class="l" id="l7"  style="float: left;">07</div>
    <div class="l" id="l8"  style="float: left;">08</div>
    <div class="l" id="l9"  style="float: left;">09</div>
        <div style="clear: both;"></div>
    <div class="l" id="l10"  style="float: left;">10</div>
    <div class="l" id="l11"  style="float: left;">11</div>
    <div class="l" id="l12"  style="float: left;">12</div>
        <div style="clear: both;"></div>
<div id="payoff" style="margin-top: 30px; background: gray; font-size: 50px; padding: 20px;"></div>




css
.hi{border-color:orange;}
.l{cursorpointer;font-size50pxwidth100pxheight100pxbackgroundgray;text-aligncentercolor#aaa;}


jquery
window.setInterval(yourfunction3000);
var j=1;
var stop=0;

var l1="testo 01";
var l2="testo 02";
var l3="testo 03";
var l4="testo 04";
var l5="testo 05";
var l6="testo 06";
var l7="testo 07";
var l8="testo 08";
var l9="testo 09";
var l10="testo 10";
var l11="testo 11";
var l12="testo 12";
$("#l1").hover(function(){stop=1;resetcolor();resettext1("1");$("#l1").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l2").hover(function(){stop=1;resetcolor();resettext1("2");$("#l2").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l3").hover(function(){stop=1;resetcolor();resettext1("3");$("#l3").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l4").hover(function(){stop=1;resetcolor();resettext1("4");$("#l4").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l5").hover(function(){stop=1;resetcolor();resettext1("5");$("#l5").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l6").hover(function(){stop=1;resetcolor();resettext1("6");$("#l6").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l7").hover(function(){stop=1;resetcolor();resettext1("7");$("#l7").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l8").hover(function(){stop=1;resetcolor();resettext1("8");$("#l8").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l9").hover(function(){stop=1;resetcolor();resettext1("9");$("#l9").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l10").hover(function(){stop=1;resetcolor();resettext1("10");$("#l10").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l11").hover(function(){stop=1;resetcolor();resettext1("11");$("#l11").css("color","white");},function(){stop=0;resetcolor();resetlast();});
$("#l12").hover(function(){stop=1;resetcolor();resettext1("12");$("#l12").css("color","white");},function(){stop=0;resetcolor();resetlast();});

function resetcolor(){$(".l").css("color","#aaa");}
function yourfunction({
    if(stop==0)
    if(j<13)$("#l"+j).css(color:"white"background"gray"},2000);
        if(j>1)$("#l"+(j-1)).css(color:"#aaa"background"gray"});
        if(j==1)$("#l12").css(color:"#aaa"background"gray"});
                      
              
               resettext();
              j++;
                               }else{
                                j=1;
    
   
                        }

function resettext(){
               if(j==1)$("#payoff").html(l1);
        if(j==2)$("#payoff").html(l2);
        if(j==3)$("#payoff").html(l3);
        if(j==4)$("#payoff").html(l4);
        if(j==5)$("#payoff").html(l5);
        if(j==6)$("#payoff").html(l6);
        if(j==7)$("#payoff").html(l7);
            if(j==8)$("#payoff").html(l8);
            if(j==9)$("#payoff").html(l9);
            if(j==10)$("#payoff").html(l10);
            if(j==11)$("#payoff").html(l11);
              if(j==12)$("#payoff").html(l12);
}

function resettext1(sttr){
               if(sttr==1)$("#payoff").html(l1);
        if(sttr==2)$("#payoff").html(l2);
        if(sttr==3)$("#payoff").html(l3);
        if(sttr==4)$("#payoff").html(l4);
        if(sttr==5)$("#payoff").html(l5);
        if(sttr==6)$("#payoff").html(l6);
        if(sttr==7)$("#payoff").html(l7);
            if(sttr==8)$("#payoff").html(l8);
            if(sttr==9)$("#payoff").html(l9);
            if(sttr==10)$("#payoff").html(l10);
            if(sttr==11)$("#payoff").html(l11);
              if(sttr==12)$("#payoff").html(l12);
}
function resetlast(){
$("#l"+(j-1)).css(color:"white"});
    resettext1(j-1);
}






http://jsfiddle.net/4ANCj/10/

Nessun commento:

Posta un commento