jQuery和CSS3炫酷旋转木马布局特效

jQuery和CSS3炫酷旋转木马布局特效

这是一款jQuery和CSS3炫酷旋转木马布局特效。该特效使用slick.js来制作,支持移动触摸事件,可以在移动手机上使用。

使用方法
在页面中引入下面的文件。

1
2
3
4
5
6
<link rel="stylesheet" type="text/css" href="assets/css/base.css" />
<link rel="stylesheet" type="text/css" href="css/slick.min.css"/>
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<script src="assets/js/jquery-2.1.1.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="assets/js/demo.js"></script>

HTML结构
该jQuery和CSS3炫酷旋转木马布局的基本HTML结构如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<header class="coidea-header">
  <div class="coidea-links">
    <a class="coidea-icon-back" href="" title="Back to the article">C</a>
    <a class="coidea-icon-github" href="http://www.htmleaf.com/" target="_blank" title="This article on Github">G</a>
  </div>
</header>
<div class="carousel">
  <div class="slider slider-for">
    <div class="item" style="background-image: url(assets/img/img-1.jpg)"></div>
    <div class="item" style="background-image: url(assets/img/img-2.jpg)"></div>
    <div class="item" style="background-image: url(assets/img/img-3.jpg)"></div>
    <div class="item" style="background-image: url(assets/img/img-4.jpg)"></div>
    <div class="item" style="background-image: url(assets/img/img-5.jpg)"></div>
  </div>
  <div class="slider slider-nav">
    <div class="nav-item">
      <div class="content" style="background-image: url(assets/img/img-1.jpg)">
 
        <div class="number">01</div>
        <div class="body">
          <div class="location">Mong Kok, Hong Kong</div>
          <div class="headline">Photo by<br>Ryan Tang</div>
          <a href="#0">
            <div class="link">Read the Story</div>
          </a>
        </div>
 
      </div>
    </div>
    <div class="nav-item">
      <div class="content" style="background-image: url(assets/img/img-2.jpg)">
 
        <div class="number">02</div>
        <div class="body">
          <div class="location">Shibuya, Japan</div>
          <div class="headline">Photo by<br>Benjamin Hung</div>
          <a href="#0">
            <div class="link">Read the Story</div>
          </a>
        </div>
 
      </div>
    </div>
    ......
  <div class="navigation">
    <button class="forward"> > </button>
    <button class="back"> < </button>
  </div>
 
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论