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

3D旋转轮播图

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

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

自己研究重写了一遍。

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

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

<!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>

二、然后，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>

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

jQuery自适应-3D旋转轮播图的更多相关文章

roundabout插件使用（3d旋转轮播图）兼容IE8
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
WPF特效-实现弧形旋转轮播图
原文:WPF特效-实现弧形旋转轮播图版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u013224722/article/details/77004 ...
CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS封装动画框架,网易轮播图,旋转轮播图
JS封装动画框架,网易轮播图,旋转轮播图 1. JS封装运动框架 // 多个属性运动框架添加回调函数 function animate(obj,json,fn) { clearInterval(ob ...
JS-特效～ 05. 缓动框架兼容封装／回掉函数／兼容透明度／层级、旋转轮播图、正则表达式、验证表单注册账号、
缓动函数中opcity 写百分值的值 JS一般不用小数运算,会照成精度丢失元素的默*认透明度是层级一次性赋值,不缓动利用for…in为同一个父元素的子元素绑定属性缓动框架兼容封装/回掉函数/ ...
jQuery淡入淡出轮播图实现
大家好我是只是个单纯的小白,这是人生第一次写博客,准备写的内容是Jquery淡入淡出轮播图实现,在此之前学习JS写的轮播图效果都感觉不怎么好,学习了jQuery里的淡入淡出效果后又写了一次轮播图效果 ...
四图3d旋转轮播
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>3d ...
【jQuery】百分比自适应屏幕轮播图特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

随机推荐

P4542 [ZJOI2011]营救皮卡丘
题目链接题意分析我们仔细分析一下发现题目要求用最多$k$条路径实现最小权覆盖首先由于最小路径覆盖针对的是有向图但是这是一个无向图所以我们面向对象编程我们维护一个数组\(d[i][j] ...
hive连接mysql遇到的问题
启动hive之前应该先启动metastore,也是在bin目录下:./hive --service metastore &然后再启动hive: ./hive 今天连接hive时总是报错:Una ...
PHP下的浮点运算不准的解决办法
首先看一段代码: 首先看一段代码: <?php $a = 0.1; $b = 0.7; var_dump(($a + $b) == 0.8); 打印出来的值居然为 boolean false P ...
Django-工程搭建
-----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3 2.安装django pip install django==1.11.11 ...
orcal创建序列
CREATE SEQUENCE flowjobseq --序列名INCREMENT BY 1 -- 每次加几个 START WITH 2000 -- 从1开始计数 NOMAXVALUE -- 不设置最 ...
算法图解学习笔记01：二分查找&大O表示法
二分查找二分查找又称折半查找,其输入的必须是有序的元素列表.二分查找的基本思想是将n个元素分成大致相等的两部分,取a[n/2]与x做比较,如果x=a[n/2],则找到x,算法中止:如果x<a[ ...
MySQL的逻辑查询语句的执行顺序
一.select语句关键字的定义顺序二.select语句关键字的执行顺序三.准备表和数据四.准备SQL逻辑查询测试语句五.执行顺序分析一.select语句关键字的定义顺序 SELECT DI ...
[转] Linux History（历史）命令用法 15 例
[From]https://linuxtoy.org/archives/history-command-usage-examples.html 如果你经常使用 Linux 命令行,那么使用 histo ...
Mac OS X中Launchpad的图标添加删除方法（添加方法别试了，和Linux很大区别）
说明:在Mac下的Launchpad图标添加和删除都与应用程序的app文件有关,如果单纯的只想在Launchpad添加自定义的图标,然后指定要某条命令运行时,建议不要这么干,Launchpad的图标管 ...
创建自己的区块链合约java版web3接口——以太坊代币（四）
texas-web3j-solidity项目是一个java版本的,使用web3j包和eth网络交互的小程序. 主要实现了以下功能: 1.发布合约 2.发起转账 3.查询交易 4.调用智能合约方法 te ...

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

3D旋转轮播图

jQuery自适应-3D旋转轮播图的更多相关文章

随机推荐

热门专题