Jquery - Ticker - Mudar após x segundos
Olá Amigos,
Estou desenvolvendo um ticker de destaques em jQuery com o plug-in wSlide, porém ao tentar adaptar para que ele mude após 3 segundos não consegui.
O plugin é esse:
http://www.webinventif.fr/wp-content/uploads/projets/wslide/jquery.wslide.unpacked.js
/**
* wSlide 0.1 - http-~~-//www.webinventif.fr/wslide-plugin/
*
* Rendez vos sites glissant !
*
* Copyright (c) 2008 Julien Chauvin (webinventif.fr)
* Licensed under the Creative Commons License:
* http-~~-//creativecommons.org/licenses/by/3.0/
*
* Date: 2008-01-27
*/
(function($){
$.fn.wslide = function(h){
h = jQuery.extend({
width: 150,
height: 150,
pos: 1,
col: 1,
effect: 'swing',
fade: false,
horiz: false,
autolink: true,
duration: 1500
}, h);
function gogogo(g){
g.each(function(i){
var a = $(this);
var uniqid = a.attr('id');
if(uniqid == undefined){
uniqid = 'wslide'+i;
}
$(this).wrap('<div class="wslide-wrap" id="'+uniqid+'-wrap"></div>');
a = $('#'+uniqid+'-wrap');
var b = a.find('ul li');
var effets = h.effect;
if(jQuery.easing.easeInQuad == undefined && (effets!='swing' || effets!='normal')){
effets = 'swing';
}
var typex = h.width;
var typey = h.height;
function resultante(prop){
var tempcalc = prop;
tempcalc = tempcalc.split('px');
tempcalc = tempcalc[0];
return Number(tempcalc);
}
var litypex = typex-(resultante(b.css('padding-left'))+resultante(b.css('padding-right')));
var litypey = typey-(resultante(b.css('padding-top'))+resultante(b.css('padding-bottom')));
var col = h.col;
if(h.horiz){
col = Number(b.length+1);
}
var manip = '';
var ligne = Math.ceil(Number(b.length)/col);
a.css('overflow','hidden').css('position','relative').css('text-align','left').css('height',typey+'px').css('width',typex+'px').css('margin','0').css('padding','0');
a.find('ul').css('position','absolute').css('margin','0').css('padding','0').css('width',Number((col+0)*typex)+'px').css('height',Number(ligne*typey)+'px');
b.css('display','block').css('overflow','hidden').css('float','left').css('height',litypey+'px').css('width',litypex+'px');
b.each(function (i) {
var offset = a.offset();
var thisoffset = $(this).offset();
$(this).attr('id',uniqid+'-'+Number(i+1)).attr('rel', Number(thisoffset.left-offset.left)+':'+Number(thisoffset.top-offset.top));
manip += ' <a href="#'+uniqid+'-'+Number(i+1)+'">'+Number(i+1)+'</a>';
});
if(typeof h.autolink == 'boolean'){
if(h.autolink){
a.after('<div class="wslide-menu" id="'+uniqid+'-menu">'+manip+'</div>');
}
}else if (typeof h.autolink == 'string'){
if($('#'+h.autolink).length){
$('#'+h.autolink).html(manip);
}else{
a.after('<div id="#'+h.autolink+'">'+manip+'</div>');
}
}
var start = '#'+uniqid+'-';
var stoccurent = "";
$('a[href*="'+start+'"]').click(function () {
$('a[href*="'+stoccurent+'"]').removeClass("wactive");
$(this).addClass("wactive");
var tri = $(this).attr('href');
tri=tri.split('#');
tri='#'+tri[1];
stoccurent = tri;
var decal = $(tri).attr('rel');
decal = decal.split(':');
var decal2 = decal[1];
decal2 = -decal2;
decal = decal[0];
decal = -decal;
if(h.fade){
a.find('ul').animate({ opacity: 0 }, h.duration/2, effets, function(){$(this).css('top',decal2+'px').css('left',decal+'px');$(this).animate({ opacity: 1 }, h.duration/2, effets)} );
}else{
a.find('ul').animate({ top: decal2+'px',left: decal+'px' }, h.duration, effets );
}
return false;
});
if(h.pos <= 0){
h.pos = 1;
}
$('a[href$="'+start+h.pos+'"]').addClass("wactive");
var tri = $('a[href*="'+start+'"]:eq('+Number(h.pos-1)+')').attr('href');
tri=tri.split('#');
tri='#'+tri[1];
stoccurent = tri;
var decal = $(tri).attr('rel');
decal = decal.split(':');
var decal2 = decal[1];
decal2 = -decal2;
decal = decal[0];
decal = -decal;
a.find('ul').css('top',decal2+'px').css('left',decal+'px');
})
}
gogogo(this);
return this;
}
})(jQuery);E a aplicação na página é essa:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http-~~-//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http-~~-//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="Scripts/jquery-latest.pack.js" type="text/javascript" charset="utf-8"></script>
<script src="Scripts/jquery.wslide.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("#wslide").wslide({
width: 525,
height: 294,
horiz: true
});
});
</script>
<style type="text/css" media="screen">
*{
font-family:Verdana, Arial, Helvetica, sans-serif;
}
/*====================== Exemple 2 ======================*/
#parent2-wrap{
border: 1px solid gray;
}
#parent2 li{
background: #F2F2F2;
padding: 15px;
margin: 5px;
}
#parent2-menu a.wactive{
font-weight: bold;
}
/*====================== Meu Slide ======================*/
#slider{
width:525px;
height:294px;
overflow:hidden;
}
#wslide{
list-style:none;
padding:0;
border:0;
margin:0;
}
#wslide li{
width:525px;
height:294px;
}
#wslide li .wslide-desc{
width:470px;
height:46px;
padding:235px 15px 13px 40px;
background:url(images/bg_destaque.png) no-repeat 0 226px;
font-size:10px;
color:#383838;
}
#wslide li .wslide-desc a{
font-size:10px;
color:#383838;
text-decoration:none;
}
#wslide li .wslide-desc a span{
font-size:14px;
color:#5f2e00;
}
#wslide-menu{
margin-top:-83px;
margin-left:460px;
z-index:2;
position:absolute;
}
#wslide-menu a{
width:10px;
height:10px;
overflow:hidden;
background:url(images/bg_pos_dest.png) no-repeat;
font-size:9px;
color:#939598;
text-decoration:none;
}
#wslide-menu a.wactive{
color:#3a3a3a;
}
</style>
</head>
<body>
<div id="slider">
<ul id="wslide">
<li style="background:url(images/foto01.jpg)">
<div class="wslide-desc">
<strong><a href="#">
<span>Feijoada (Resenha Bar)</span><br />
Adipiscing a, vulputate nec, sagittis quis, sapien nean sit amet justo in massa sodales auctor.Nullam ligula. Sapien nean sit amet justo in massa sodales auctor.
</a></strong>
</div>
</li>
<li style="background:url(images/foto01.jpg)">
<div class="wslide-desc">
<strong><a href="#">
<span>Feijoada (Resenha Bar)</span><br />
Adipiscing a, vulputate nec, sagittis quis, sapien nean sit amet justo in massa sodales auctor.Nullam ligula. Sapien nean sit amet justo in massa sodales auctor.
</a></strong>
</div>
</li>
<li style="background:url(images/foto01.jpg)">
<div class="wslide-desc">
<strong><a href="#">
<span>Feijoada (Resenha Bar)</span><br />
Adipiscing a, vulputate nec, sagittis quis, sapien nean sit amet justo in massa sodales auctor.Nullam ligula. Sapien nean sit amet justo in massa sodales auctor.
</a></strong>
</div>
</li>
<li style="background:url(images/foto01.jpg)">
<div class="wslide-desc">
<strong><a href="#">
<span>Feijoada (Resenha Bar)</span><br />
Adipiscing a, vulputate nec, sagittis quis, sapien nean sit amet justo in massa sodales auctor.Nullam ligula. Sapien nean sit amet justo in massa sodales auctor.
</a></strong>
</div>
</li>
</ul>
</div>
</body>
</html>Alguém sabe me dizer como eu poderi altera-lo para que mudasse após alguns segundos?
Muito Obrigado
Marcelo Kubart
Discussão (1)
Carregando comentários...