jquery宽屏的幻灯片动画切换代码



122 486 163



特效描述:jquery 宽屏的幻灯片 动画切换代码,来自德国jquery动画效果幻灯片

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/tema.css" />

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/effects.js"></script>
<script src="js/jquery.cycle.all.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/code.js"></script>

3. HTML代码

  <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"> <a href="javascript:">Veja o projeto</a> </div>
              <!--/veja o projeto - botão-->
              <span class="servicos"><a href="javascript:">Conheça melhor nossos serviços.</a></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"> <a href="javascript:">Veja o projeto</a> </div>
              <!--/veja o projeto - botão-->
              <span class="servicos"><a href="javascript:">Conheça melhor nossos serviços.</a></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"> <a href="javascript:">Veja o projeto</a> </div>
              <!--/veja o projeto - botão-->
              <span class="servicos"><a href="javascript:">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"> <a href="javascript:">Veja o projeto</a> </div>
              <!--/veja o projeto - botão-->
              <span class="servicos"><a href="javascript:">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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 加载动画 选项卡切换 滑动手风琴 html5弹窗动画 渐隐切换 淡出淡进 html5动画 html5按钮动画 图片淡出淡进 html5图片动画 图片切换 html5文字动画 文字切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到