PROMULGATOR

    救赎

    江苏省苏州市
    Html
    Css
    Js
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
<div id="perspective">
    <div id="wrap" style="margin-top:264px;">
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-1.png" class="img1" alt="1">
            <span>我是第一个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-2.png" class="img2" alt="2">
            <span>我是第二个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-3.png" class="img3" alt="3">
            <span>我是第三个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-4.png" class="img4" alt="4">
            <span>我是第四个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-5.png" class="img5" alt="5">
            <span>我是第五个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-6.png" class="img6" alt="">
            <span>我是第六个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-7.png" class="img7" alt="">
            <span>我是第七个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-8.png" class="img1" alt="1">
            <span>我是第八个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-9.png" class="img2" alt="2">
            <span>我是第九个图片</span>
        </div>
        <div class="img_con">
            <img src="http://www.jq22.com/img/cs/500x300-10.png" class="img3" alt="3">
            <span>我是第十个图片</span>
        </div>
        <!--<p></p>-->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
* {
    margin:0;
    padding:0;
}
body {
    background:#000;
    overflow:hidden;
}
#perspective {
    width:780px;
    height:500px;
    margin:auto;
    overflow:hidden;
    perspective:650px;
    position:relative;
}
#wrap {
    width:150px;
    height:180px;
    margin:0 auto;
    position:relative;
    transform-style:preserve-3d;
    transform:rotateX(0deg) rotateY(0deg) translateZ(300px);
    margin-top:264px;
}
#wrap .img_con {
    width:100%;
    height:100%;
    position:absolute;
    border-radius:1px;
    transform:rotateY(0deg) translateZ(500px);
    -webkit-box-reflect:below 5px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5) 100%);
    cursor:pointer;
}
#wrap .img_con span {
    display:inline-block;
    top:0px;
    color:white;
    z-index:100;
    position:absolute;
    top:0px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
$(function() {
    // 以下当前角度范围-120°~240° 所以总度数为120°
    var distance = 500; //旋转半径
    // var imgArr = ['1.png', '2.png', '3.png', '4.png', '5.png', '6.png', '7.png'];
    var imgArr = $('#wrap .img_con');
    /* var deg = 120 / (imgArr.length - 1); //每个图片对应的角度*/
    var deg = 20;
    $('#wrap .img_con').css({
        transform: 'rotateY(-180deg) ' + 'translateZ(' + distance + 'px)'
    });
    setTimeout(function() {
        $.each(imgArr, function(i, m) {
            $(m).css({
                transform: 'rotateY(' + (-140 - (deg * i)) + 'deg) translateZ(' + distance + 'px)',
                transition: 'transform ' + (imgArr.length - 1 - i) * 0.1 + 's'
            });
        });
    }, 100)
    var num = 140;
    var subscript = 3;
    $(".btn-last").click(function() {
        if (imgArr.length - 2 > subscript) {
            num -= 20;
            subscript++;
            $.each(imgArr, function(i, m) {
                $(m).css({
                    transform: 'rotateY(' + (-num - (deg * i)) + 'deg) translateZ(' + distance + 'px)',
                    transition: 'transform .5s'
                });
            });
        }
    });
    $(".btn-up").click(function() {
        if (subscript > 3) {
            num += 20;
            subscript--;
            $.each(imgArr, function(i, m) {
                $(m).css({
                    transform: 'rotateY(' + (-num - (deg * i)) + 'deg) translateZ(' + distance + 'px)',
                    transition: 'transform 0.5s'
                });
            });
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
 立即下载

3D旋转轮播图（原创）

0