jQuery实现3D轮播图支持自动滑动效果

jQuery实现3D轮播图支持自动滑动效果

基于jQuery 3D旋转图片轮播效果(支持滚轮)网页特效,插件用的是过度和css3变形来实现文字缩放的效果,鼠标滚动滚轮/点击左右图片360度3D式滚动切换图片,自动轮播,切换效果流畅,支持IE6+以上浏览器。代码逻辑简单,可根据自己的需求随意更改。

使用方法
需要引入的JS文件zturn.js

1
2
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/zturn.js"></script>

轮播时长

1
2
3
4
5
6
7
8
9
var aa = new zturn({
    id: "zturn",
    opacity: 0.9,
    width: 200,
    Awidth: 300,
    scale: 0.9,
    // auto: true,//是否轮播 默认5000
    turning: 2000//轮播时长
})

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<div style="height: 700px;width: 800px">
<!--轮播-->
<div class="lb_gl">
<div class="container">
  <div class="pictureSlider poster-main">
      <ul id="zturn" class="poster-list">
          <li class="poster-item  zturn-item">
              <p class="xxgy">我是滚动1</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a1.png" width="100%">
              </div>

             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动2</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a2.png" width="100%">
              </div>
             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动3</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a3.png" width="100%">
              </div>
             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动4</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a4.png" width="100%">
              </div>
             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动5</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a5.png" width="100%">
              </div>
             
          </li>
          <li class="poster-item  zturn-item">
              <p class="xxgy">我是滚动6</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a1.png" width="100%">
              </div>
             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动7</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a2.png" width="100%">
              </div>
             
          </li>

          <li class="poster-item zturn-item">
              <p class="xxgy">我是滚动8</p>
              <p class="say">明月几时有</p>
              <div class="for_btn">
                  <img src="img/a3.png" width="100%">
              </div>
             
          </li>    

      </ul>

  </div>
</div>
</div>
</div>
当前内容只有登录了才能查看,如果您已经注册,请登录
6

发表评论