Script slide de fotos ou noticias com jCycle

  • DATA

    10/05 2010

  • VISITAS

    2.769

  • COMENTÁRIOS

    5

  • TAGS

    , ,

  • ORKUT

Fala meus queridos, Aqui esta o script de como criar slides com jQuery, utilizamos nele o plugin jCycle, para baixar os arquivos utilizados acesso os links abaixo:

VEJA A VÍDEO AULA

jQuery Download

jCycle Download

STYLE

<style type="text/css">
*{margin:0; padding:0;}
#destaques{width:500px; height:300px;}
#destaques ul{list-style:none;}
.paginacao a{padding:3px; border:1px solid #333; text-decoration:none;
 font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#333; margin:5px 2px;}
.paginacao a:hover{background:#C4FFFF;}
</style>

SCRIPT

<script type="text/javascript" src="scripts/jquery.js" /></script>
<script type="text/javascript" src="scripts/cycle.js" /></script>

<script type="text/javascript">
$(function(){
   $('#destaques ul').cycle({
     fx: 'fade',
     speed: 2000,
     timeout: 5000,
     next: '#proximo',
     prev: '#anterior',
     pager: '#pager'
   })
 })
</script>

HTML

<div id="destaques">
 <ul>
 <li>
 <img src="images/01.jpg" alt="" />
 <h1>Notícia destaque 01</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et condimentum nibh
 . Nunc iaculis iaculis cursus. Integer nisl tellus, dictum sit amet consequat eget
 cursus nec
 </p>

 </li>

 <li>
 <img src="images/02.jpg" alt="" />
 <h1>Notícia destaque 02</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et condimentum nibh
 . Nunc iaculis iaculis cursus. Integer nisl tellus, dictum sit amet consequat eget
 cursus nec
 </p>
 </li>

 <li>
 <img src="images/03.jpg" alt="" />
 <h1>Notícia destaque 03</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et condimentum nibh
 . Nunc iaculis iaculis cursus. Integer nisl tellus, dictum sit amet consequat eget
 cursus nec
 </p>
 </li>

 <li>
 <img src="images/04.jpg" alt="" />
 <h1>Notícia destaque 04</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et condimentum nibh
 . Nunc iaculis iaculis cursus. Integer nisl tellus, dictum sit amet consequat eget
 cursus nec
 </p>
 </li>

 <li>
 <img src="images/05.jpg" alt="" />
 <h1>Notícia destaque 05</h1>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et condimentum nibh
 . Nunc iaculis iaculis cursus. Integer nisl tellus, dictum sit amet consequat eget
 cursus nec
 </p>
 </li>
 </ul>

 <div class="paginacao">
 <a href="#" id="anterior">Anterior</a>
 <span id="pager"></span>
 <a href="#" id="proximo">Próximo</a>
 </div><!--paginacao-->

</div><!--destaques-->
Bookmark e Compartilhe

Interatividade
  • Joao carlos Falou Em: 10 de maio de 2010 as 17:48

    Muito boa.. video aulas assim, dao ate animo na gente… posta sempre aula assim q fica show…monta um sisteminha de cadastro de usuarios.. com imagem do lado….

  • RafaBaller Falou Em: 14 de maio de 2010 as 15:12

    Pow..concordo com o JOAO ai! monta msmo um sisteminha de cadastro de usuarios com imagem seria otimo aprender =D TO ANIMADISSIMO…esse site é perfeito!

  • Paulo Kampus Falou Em: 7 de agosto de 2010 as 15:11

    Olá Robson!

    Irmão pra colocar esse sistema num site wordpress…? fiz ai da forma que vc ensinou na VA…tudo tranquilo funcionou blz…mas não estou conseguindo botar pra funcionar no wordpress…enfim pegar as noticias no wordpress e colocá-las em forma de slides…da uma ajuda ai….

  • Crystian Falou Em: 14 de agosto de 2010 as 12:04

    Pois é, eu fiz aqui tudo certo como ensinado na video aula. Mas quando vou fazer o slide no meu tema do wordpress não funciona. Da no entender que ele não está chamando os scripts. Não sei se é assim:
    <script type="text/javascript" src="/js/jquery.js” />
    <script type="text/javascript" src="/js/cycle.js” />

    $(function(){
    $(‘#destaques ul’).cycle({
    fx: ‘fade’,
    speed: 2000,
    timeout: 5000,
    next: ‘#proximo’,
    prev: ‘#anterior’,
    pager: ‘#pager’
    })
    })

    Eu coloquei este código no header.php, e no index fiz o loop certinho, mas nada acontece.

  • Caio Rodrigues Falou Em: 25 de agosto de 2010 as 12:33

    Cara, muito bom a video aula!!!

    Agradeço de mais!!!!

Deixe seu comentário!