jQuery自适应-3D旋转轮播图

程序员文章站 2022-03-26 09:33:19

3D旋转轮播图本例源于（站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm）其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）自己研究重写了一遍。一、先写静态的初始样式的c ......

3d旋转轮播图

本例源于（站长之家实例http://sc.chinaz.com/jiaoben/170215391070.htm）

其他相似示例（https://www.cnblogs.com/incredible-x/p/9688333.html）

自己研究重写了一遍。

一、先写静态的初始样式的css和html。我用的是 550x300的大小一致的 5张图片，代码可拓展为三张、四张、甚至大于五张。如图是静态效果：

图后的代码是静态时的样式html和css。

jQuery自适应-3D旋转轮播图

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>document</title>
    <!-- jquery cdn -->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
    * { margin: 0; padding: 0;word-break: break-all; }
    a { color:#fff;text-decoration: none;}
    a:hover { text-decoration: none;}
    ul,li { list-style: none;}
    html,body{width: 100%;height: 100%;}
    .main {max-width: 800px; margin: 0 auto;}
    #slide {width: 100%;height: 420px;position: relative;overflow: hidden;}
    #slide .pic { position: absolute; }
    #slide .pic img {width: calc(100% - 14px);height: calc(100% - 14px);}
    #slide .p1 { z-index: 3;width: 40%;height: 40%;left: -50%;top: 30%;}
    #slide .p2 { z-index: 4;width: 60%;height: 60%;left: -20%;top: 20%;}
    #slide .p3 {z-index: 5; width: 80%;height: 80%; left: 10%;top: 10%;}
    #slide .p4 { z-index: 4; width: 60%; height: 60%; left: 60%; top: 20%;}
    #slide .p5 { z-index: 3; width: 40%;height: 40%; left: 110%; top: 30%;}
    #slide .btn {
         position: absolute;
        z-index: 6;
        bottom: 20%;
        width: 180px;  /* 计算得出 5*30+5*6=180 */
        margin-left: -90px;
        left: 50%;
    }
    #slide .btn span {
        width: 24px;
        height: 8px;
        border-radius: 3px;
        float: left;
        background-color: #dedede;
        margin: 0 3px;
    }
    #slide .btn .on {background-color: #ffd200; }

    </style>
</head>

<body>
    <div class="main">
        <div id="slide" class="slide">
            <div class="pic"><img src="./images/1.png"></div>
            <div class="pic"><img src="./images/2.png"></div>
            <div class="pic"><img src="./images/3.png"></div>
            <div class="pic"><img src="./images/4.png"></div>
            <div class="pic"><img src="./images/5.png"></div>
            <div class="btn">
                <!-- <span data-minibtn-id='1'></span><span></span><span></span><span></span><span></span> -->
            </div>
        </div>
        <button class="btn-prev">向左</button>
        <button class="btn-next">向右</button>
    </div>
</body>
</html>

view code

二、然后，js编写动态交互效果。这段是js代码（要引入jquery库）

备注还比较详细，一和二的代码直接复制就可以运行。

<script>
    var slidenumber; //轮播图片的数量
    var minislidebtn = true;         //minislidebtn=true为开启滚动按钮
    var isabletouch = true;          //是否可以触摸滑动切换
    var isautoplay = true;          //是否可以自动轮播

    //窗口大小改变时改变轮播图宽高
    $(window).resize(function () {
        $(".slide").height($(".slide").width() * 0.56);
    });

    $(function () {

        $("#slide").height($("#slide").width() * 0.56);  //调整轮播图的高度
        slidenumber = $("#slide img").length;     //轮播图数量
        for (let i = 0; i < slidenumber; i++) {         //给每个div,而不是img,添加自定义属性编号
            $("#slide .pic").eq(i).attr('data-img-id', i);
        }

        // 根据轮播图片数量添加图片位置对应的样式 
        // 还有 if(slidenumber=1,=2,=3,=4,>5)
        if (slidenumber = 5) {
            for (let i = 0; i < slidenumber; i++) {
                $("#slide .pic").eq(i).addclass('p' + (i + 1));
            }
        }

        //根据图片数量设置轮播图按钮
        if (minislidebtn) {
            for (let i = 0; i < slidenumber; i++) {
                $("#slide .btn").append("<span data-minibtn-id=" + i + "></span>");
            }
            $("#slide .btn").width(slidenumber * 34);
            $("#slide .btn").css('margin-left', '-' + slidenumber * 17 + 'px'); //调整margin-left 负值使按钮居中

        }

        //自动切换
        if (isautoplay) { setinterval(() => { right(); }, 3000) }
        //触摸切换
        if (isabletouch) { slidetouch(); }

        imgclickchange();//点击图片左右切换图片
        currentbtn();//当前轮播按钮的选中状态

    });

    $(".btn-prev").click(function () { //点击按钮翻上一页
        left();
    })
    $(".btn-next").click(function () { //点击按钮翻下一页
        right();
    })

    /*下一张图片，右边的图向左走，注意:第一个变成最后一个，最后一个变成倒数第二个*/
    function right() {
        let temp = new array();
        for (let i = 0; i < slidenumber; i++) {
            temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class是pic p1,pic p2,pic p3...
        }
        for (let i = 0; i < slidenumber; i++) {
            if (i == 0) {     //如果编号为第一张图片，它将变成最后一个
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[slidenumber - 1]);
            } else {
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i - 1]);
            }
        }
        imgclickchange();//点击图片左右切换图片
        currentbtn();//当前轮播按钮的选中状态
    }

    /*上一张图片, 左边的图向右走，注意:最后一张会变成第一张，第一个图变成第二个*/
    function left() {
        let temp = new array();
        for (let i = 0; i < slidenumber; i++) {
            temp[i] = $("#slide .pic[data-img-id=" + i + "]").attr('class'); //临时数组获取class pic p1,pic p2...
        }
        for (let i = 0; i < slidenumber; i++) {
            if (i == slidenumber - 1) {   //如果编号为最后一张图片，它将变成
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[0]);
            } else {
                $("#slide .pic[data-img-id=" + i + "]").attr('class', temp[i + 1]);
            }
        }
        imgclickchange();//点击图片本身切换图片
        currentbtn();//当前轮播按钮的选中状态
    }

    /*点击图片左右切换图片*/
    function imgclickchange() {
        // $("#slide .p2").click(function(){ previmg();});//为什么这种写法无效
        // $("#slide .p4").click(function(){ nextimg();});//为什么这种写法无效
        $('#slide .pic').removeattr('onclick');
        $("#slide .p2").attr('onclick', 'left()');
        $("#slide .p4").attr('onclick', 'right()');
    }


    /*当前轮播按钮的选中状态*/
    function currentbtn() {
        var cur = parseint($("#slide .p3").attr('data-img-id'));//取.p3的当前img-id
        $("#slide .btn span").removeclass('on');
        $("#slide .btn span[data-minibtn-id=" + cur + "]").addclass('on');
    }

    /* jquery写法 slidetouch(),触摸滑动切换 */
    /*
    function slidetouch() {
        let _start = 0, _end = 0;
        $("#slide").on('touchstart', (e) => {
            _start = e.originalevent.targettouches[0].pagex;
        });
        $('#slidd').on('touchmove', (e) => {
            // _end = (_start - e.originalevent.targettouches[0].pagex);
            _end = e.originalevent.targettouches[0].pagex;
        });
        $('#slide').on('touchend', (e) => {
            if ((_start - _end) < -100) {   //【起点-终点】的绝对值 >100,故 x<-100 & x>100
                left();
                _end = 0;
            } else if ((_start - _end) > 100) {
                right();
                _end = 0;
            }
        });
    }*/


    /* js原生写法 slidetouch(),作用完全同上,触摸滑动切换 */
    function slidetouch() {
        let _start = 0, _end = 0,
            _ele = document.getelementbyid('slide');
        _ele.addeventlistener('touchstart', touchstart, false);
        _ele.addeventlistener('touchmove', touchmove, false);
        _ele.addeventlistener('touchend', touchend, false);
        function touchstart(e) {
            _start = e.targettouches[0].pagex;
        }
        function touchmove(e) {
            _end = e.targettouches[0].pagex;
        }
        function touchend(e) {
            if ((_start - _end) < -100) {   //【起点-终点】的绝对值 >100,故 x<-100 & x>100
                left();
                _end = 0;
            } else if ((_start - _end) > 100) {
                right();
                _end = 0;
            }
        }
    }

</script>

view code

效果如下图：只显示三张，太多图的话，手机移动端显示不下

jQuery自适应-3D旋转轮播图

上一篇： RestTemplate 负载均衡原理

下一篇： asp.net如何生成图片验证码(简单)

jQuery自适应-3D旋转轮播图

3d旋转轮播图

jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】

jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】

纯css,js原生，js原型，jquery四种方式实现轮播图效果讲解

微信小程序使用swiper组件实现类3D轮播图

原生js实现旋转木马轮播图效果

用jquery制作的简单轮播图

jquery实现左右滑动式轮播图

原生JS实现旋转木马轮播图特效

jQuery轮播图实例详解

jQuery焦点图轮播效果实现方法