<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(yourfunction, 10000);
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{cursor: pointer;font-size: 50px; width: 100px; height: 100px; background: gray;text-align: center; color: #aaa;}
jquery
window.setInterval(yourfunction, 3000);
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