仿迅雷全屏响应式轮播图动画jQuery特效

PetitQ 幻灯片/轮播 2018-11-07 1.81K 0 0

这是一款 jquery 来制作的仿迅雷官方网站全屏响应式轮播图动画特效。该轮播图特效简单实用，效果时尚大方，且可以兼容 ie8 浏览器。

使用方法:

在页面中引入样式文件 nheader.css、nstyle.css 和 jquery.min.js 文件。

也想出现在这里？联系我们吧

<link rel="stylesheet" href="css/nheader.css">

<link rel="stylesheet" href="css/nstyle.css">

<script src="js/jquery.min.js"></script>

HTML 结构:

该全屏响应式轮播图的 HTML 结构如下：

```
<div class="header">
```
```
    <ul class="nav_list">
```
```
      <li class="nav_li">
```

        <a href="javascript:;" class="btn_nav" id="nav_more"><i class="ic_more png"></i>更多</a>

        <div class="more_nav" id="more_nav">

```
          <!--[if lt IE 9]>
```

            <span class="opc_bg"></span>

```
          <![endif]-->
```

          <i class="ic_bdot png" id="h_bdot"></i>

```
          <ul id="h_nav">
```

            <li><a href="#" class="btn_snav">赚钱宝</a></li>

            <li><a href="#" class="btn_snav">新闻动态</a></li>

            <li><a href="#" class="btn_snav">人力资源</a></li>

            <li><a href="#" class="btn_snav">投资关系</a></li>

            <li><a href="#" class="btn_snav">联系我们</a></li>

```
            <li>
```

              <i class="ic_sdot png" id="h_sdot"></i>

              <dl class="sub_nav" id="h_subnav">

                <dt><a href="#" class="btn_snav">迅雷9</a></dt>

                <dd><a href="#">公司简介</a></dd>

                <dd><a href="#">发展历程</a></dd>

                <dd><a href="#">管理团队</a></dd>

                <dd><a href="#">联系我们</a></dd>

```
              </dl>
```
```
            </li>
```
```
          </ul>
```
```
        </div>
```
```
      </li>
```
```
    </ul>
```
```
  </div>
```
```
  <div class="wrap" id="wrap">
```
```
    <div class="wrapper">
```

      <div class="product_list" id="product_list">

        <div class="product_box shoulei show">

          <div class="bg_box"><img src="img/bg_shoulei.jpg"></div>

```
          <div class="content">
```
```
            <div class="main_box">
```

              <h2 class="hide_txt  png">

                <span class="txt_1 png">炽</span>

                <span class="txt_2 png">热</span>

                <span class="txt_3 png">追</span>

                <span class="txt_4 png">片</span>

                <span class="txt_5 png">之</span>

                <span class="txt_6 png">心</span>

                <span class="txt_7 png">没</span>

                <span class="txt_8 png">有</span>

                <span class="txt_9 png">wifi</span>

                <span class="txt_10 png">也</span>

                <span class="txt_11 png">挡</span>

                <span class="txt_12 png">不</span>

                <span class="txt_13 png">住</span>

```
              </h2>
```

              <a href="#"  class="btn_product" title="手机迅雷">手机迅雷</a>

```
            </div>
```
```
          </div>
```
```
        </div>
```
```
        <div class="product_box xnet">
```

          <div class="bg_box"><img src="img/bg_xnet.jpg"></div>

```
          <div class="content">
```
```
            <div class="main_box">
```

              <h2 class="hide_txt  png">

                <span class="txt_1 png">极</span>

                <span class="txt_2 png">速</span>

                <span class="txt_3 png">不</span>

                <span class="txt_4 png">止</span>

                <span class="txt_5 png">一</span>

                <span class="txt_6 png">次</span>

                <span class="txt_7 png">的</span>

                <span class="txt_8 png">挑</span>

                <span class="txt_9 png">战</span>

```
              </h2>
```

              <a href="#" class="btn_product" title="迅雷9">迅雷9</a>

```
            </div>
```
```
          </div>
```
```
        </div>
```

        <div class="product_box member">

          <div class="bg_box"><img src="img/bg_member.jpg"></div>

```
          <div class="content">
```
```
            <div class="main_box">
```

              <h2 class="hide_txt  png">

                <span class="txt_1 png">快</span>

                <span class="txt_2 png">让</span>

                <span class="txt_3 png">生</span>

                <span class="txt_4 png">活</span>

                <span class="txt_5 png">慢</span>

                <span class="txt_6 png">下</span>

                <span class="txt_7 png">来</span>

```
              </h2>
```

              <a href="#" class="btn_product" title="迅雷会员">迅雷会员</a>

```
            </div>
```
```
          </div>
```
```
        </div>
```
```
        <div class="product_box xkn">
```

          <div class="bg_box"><img src="img/bg_xkn.jpg"></div>

```
          <div class="content">
```
```
            <div class="main_box">
```
```
              <h2 class="hide_txt png">
```

                <span class="txt_1 png">引</span>

                <span class="txt_2 png">爆</span>

                <span class="txt_3 png">风</span>

                <span class="txt_4 png">驰</span>

                <span class="txt_5 png">电</span>

                <span class="txt_6 png">掣</span>

                <span class="txt_7 png">的</span>

                <span class="txt_8 png">网</span>

                <span class="txt_9 png">速</span>

```
              </h2>
```

              <a href="#" class="btn_product" title="迅雷快鸟">迅雷快鸟</a>

```
            </div>
```
```
          </div>
```
```
        </div>
```
```
        <div class="product_box xav">
```

          <div class="bg_box"><img src="img/bg_xav.jpg"></div>

```
          <div class="content">
```
```
            <div class="main_box">
```
```
              <h2 class="hide_txt png">
```

                <span class="txt_1 png">流</span>

                <span class="txt_2 png">畅</span>

                <span class="txt_3 png">画</span>

                <span class="txt_4 png">质</span>

                <span class="txt_5 png">乐</span>

                <span class="txt_6 png">无</span>

                <span class="txt_7 png">止</span>

                <span class="txt_8 png">境</span>

```
              </h2>
```

              <a href="#" class="btn_product" title="迅雷影音">迅雷影音</a>

```
            </div>
```
```
          </div>
```
```
        </div>
```
```
      </div>
```

      <div class="product_btns" id="product_btns">

```
        <div class="content">
```
```
          <div class="btns_area">
```

            <div class="btns_box" id="control_box">

              <a href="#" class="btn_ipr btn_shoulei cur" title="迅雷素材" ><span class="ic_shoulei hide_txt png">手机迅雷</span></a>

              <a href="#" class="btn_xnet" title="迅雷7.9"><span class="ic_xnet hide_txt png">迅雷7.9</span></a>

              <a href="#" class="btn_member" title="迅雷会员"><span class="ic_member hide_txt png">迅雷会员</span></a>

              <a href="#" class="btn_xkn" title="迅雷快鸟"><span class="ic_xkn hide_txt png">迅雷快鸟</span></a>

              <a href="#" class="btn_xav" title="迅雷影音"><span class="ic_xav hide_txt png">迅雷影音</span></a>

              <span class="ic_line" id="ic_line"></span>

```
            </div>
```
```
          </div>
```
```
        </div>
```
```
      </div>
```

      <div class="rpt_bg png" id="rpt_bg"></div>

```
    </div>
```
```
</div>
```

仿迅雷全屏响应式轮播图动画 jQuery 特效

已有 453 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

幻灯片/轮播

仿迅雷全屏响应式轮播图动画jQuery特效

使用方法:

HTML 结构:

仿迅雷全屏响应式轮播图动画 jQuery 特效

相关文章

全宽图片重叠幻灯片jQuery特效

Jcircle - 响应式圆形轮播图插件

商城分类导航菜单+广告焦点图轮播代码

发表回复取消回复

热销模板

幻灯片/轮播

使用方法:

HTML 结构:

仿迅雷全屏响应式轮播图动画 jQuery 特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复