Jquery - Ticker - Mudar após x segundos

[Marcelo Kubart 0]

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

[William Bruno 1501]

cara pelo que vi, esse plugin não possui nativamente essa troca automática.. então você precisa fazer na mão.

veja:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$("#wslide").wslide({
		width: 525,
		height: 294,
		horiz: true
	});
});
var d = 0;
function wb_animar()
{
	d = ( d<=1050 ) ? d+525 : 0;
	$("#wslide").animate({ top: '0px',left: '-'+d+'px' }, 1500, 'swing' );
}
window.setInterval( 'wb_animar()', 1000 );
</script>

ou seja, é um efeito tão simples, que nem precisava de nada do plugin.