以下是 jQ键盘控制焦点图轮播滚动切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>jQuery键盘控制焦点图</title>
<link rel="stylesheet" type="text/css" href="cakecodigo/theme/Codigo/css/reset.css" />
<link rel="stylesheet" type="text/css" href="cakecodigo/theme/Codigo/css/tema.css" />
<link rel="stylesheet" type="text/css" href="cakecodigo/theme/Codigo/css/slide.css" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="theme/Codigo/css/ie.css" />
<![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="theme/Codigo/css/ie7.css" />
<![endif]-->
<script type="text/javascript" src="cakecodigo/theme/Codigo/js/jquery.min.js">
</script><script type="text/javascript" src="cakecodigo/theme/Codigo/js/effects.js"></script>
<script type="text/javascript" src="cakecodigo/theme/Codigo/js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="cakecodigo/theme/Codigo/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="cakecodigo/theme/Codigo/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="cakecodigo/theme/Codigo/js/code.js"></script>
</head>
<body>
<!--header's background luz-->
<div id="luz">
<div class="slide-2013">
<ul>
<li class="azul">
<div class="bg-textura">
<div class="centralizar-slide">
<h3>Com <strong>Responsive Web Design</strong>, o site do Shopping Iguatemi se ajusta automaticamente a qualquer dispositivo.</h3>
<div class="botao-link">
<div class="veja-o-projeto">Veja o projeto</div>
<!--/veja o projeto - botão-->
<span class="servicos">Conheça melhor nossos serviços.</span> </div>
<!--/botao-link-->
<div class="imagem"></div>
<!--/img-->
<div class="checklist">
<ol>
<li>Planejamento de comunicação digital</li>
<li><strong>Responsive Web Design</strong></li>
<li><strong>DESENVOLVIMENTO E MANUTENÇÃO DE SITE</strong></li>
<li><strong>SEO</strong></li>
<li><strong>Gerenciamento de redes sociais</strong></li>
</ol>
</div>
<!--/checklist-->
<div class="use-as-setas"> <small>Se preferir, use as setas do seu teclado.</small>
<div class="seta esq"></div>
<div class="seta dir"></div>
</div>
</div>
<!--/centralizador-->
</div>
<!--/bg textura-->
</li>
<li class="verde">
<div class="bg-textura">
<div class="centralizar-slide">
<h3>Por trás do Balada In, está nosso sistema que automatiza desde a publicação de notícias, até o gerenciamento de clientes, anúncios e colaboradores.</h3>
<div class="botao-link">
<div class="veja-o-projeto">Veja o projeto</div>
<!--/veja o projeto - botão-->
<span class="servicos">Conheça melhor nossos serviços.</span> </div>
<!--/botao-link-->
<div class="imagem"></div>
<!--/img-->
<div class="checklist">
<ol>
<li><strong>Web design</strong></li>
<li><strong>Desenvolvimento de SITE E sistemas</strong></li>
<li><strong>Mobile Apps</strong></li>
<li><strong>Gerenciamento de redes sociais</strong></li>
</ol>
</div>
<!--/checklist-->
</div>
<!--/centralizador-->
</div>
<!--/bg textura-->
</li>
<li class="laranja">
<div class="bg-textura">
<div class="centralizar-slide">
<h3>Para o <strong>Pinheiro Supermercado</strong>, fizemos o primeiro <strong>site de e-commerce</strong> de um supermercado cearense.</h3>
<div class="botao-link">
<div class="veja-o-projeto">Veja o projeto</a> </div>
<!--/veja o projeto - botão-->
<span class="servicos">Conheça melhor nossos serviços.</a></span> </div>
<!--/botao-link-->
<div class="imagem"></div>
<!--/img-->
<div class="checklist">
<ol>
<li><strong>E-Commerce</strong></li>
<li><strong>Web Design</strong></li>
<li><strong>CMS</strong></li>
<li><strong>SEO</strong></li>
</ol>
</div>
<!--/checklist-->
</div>
<!--/centralizador-->
</div>
<!--/bg textura-->
</li>
<li class="amarelo">
<div class="bg-textura">
<div class="centralizar-slide">
<h3>A Fortaleza Travel utiliza o <strong>Facebook</strong> como canal direto de atendimento e venda de pacotes turísticos, fidelizando clientes e gerando receita.</h3>
<div class="botao-link">
<div class="veja-o-projeto">Veja o projeto</a> </div>
<!--/veja o projeto - botão-->
<span class="servicos">Conheça melhor nossos serviços.</a></span> </div>
<!--/botao-link-->
<div class="imagem"></div>
<!--/img-->
<div class="checklist">
<ol>
<li><strong>Gerenciamento de redes sociais</strong></li>
<li>Geração de conteúdo</li>
</ol>
</div>
<!--/checklist-->
</div>
<!--/centralizador-->
</div>
<!--/bg textura-->
</li>
</ul>
<div class="guia">
<div class="itens"> </div>
</div>
</div>
</div>
</body>
</html>
分享到QQ
分享到微博
微信扫一扫
