js jQ轮播图（三种）

最新推荐文章于 2023-09-14 18:36:20 发布

努力，加油，奋斗

最新推荐文章于 2023-09-14 18:36:20 发布

阅读量1.4k

点赞数 3

分类专栏：笔记 JavaScript jQuery 文章标签：轮播

本文链接：https://blog.csdn.net/qq_43681948/article/details/89857331

版权

第一种:
用了css3进行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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .view {
            width: 560px;
            height: 300px;
            margin: 100px auto;
            position: relative;
        }

        ul {
            width: 100%;
            height: 100%;
            list-style: none;
            /* transform: rotate3d(1,1,0,-30deg); */
            /*  transform-style使被转换的子元素保留其 3D 转换,当某个元素进行3D转换的时候，保留其3D属性 就是3D*/
            transform-style: preserve-3d;
        }

        ul>li {
            width: 100%;
            height: 25%;
            float: left;
            position: relative;
            transform-style: preserve-3d;
            /* 添加过渡效果 */
            transition: transform 0.3s;
        }

        /* 设置每一个切片图像的一小块内容 */
        ul>li>span {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }

        ul>li>span:nth-of-type(1) {
            background-image: url("images/q1.jpg");
            /* 想z轴正方向偏移，也就是往垂直于面向我们的平面移动 */
            transform: translateZ(280px);
        }

        ul>li>span:nth-of-type(2) {
            background-image: url("images/q2.jpg");
            /* 通过这样Y轴位移和X轴旋转，让第二张放置于正方体的上方 */
            transform: translateX(280px) rotateY(90deg);
        }

        ul>li>span:nth-of-type(3) {
            background-image: url("images/q3.jpg");
            /* Z轴平移到画面的后方，再通过180度的X轴旋转，让图片倒立，到时候翻转过来的时候，图片的显示正常的。 */
            transform: translateZ(-280px) rotateY(180deg);
        }

        ul>li>span:nth-of-type(4) {
            background-image: url("images/q4.jpg");
            /* Y轴平移到画面的下方，通过-90度的逆时针旋转，让面倒立而且图像与平面平行 */
            transform: translateX(-280px) rotateY(-90deg);
        }

        /* 设置每一个li元素的span所显示的图片位置 */
        ul>li:nth-child(2)>span {
            /* 让第二个span的水平位移为自身宽度的，可以显示出下一个区域 */
            background-position: 0 -100%;
        }

        ul>li:nth-child(3)>span {
            background-position: 0 -200%;
        }

        ul>li:nth-child(4)>span {
            background-position: 0 -300%;
        }

        .pre,
        .next {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            position: absolute;
            top: 50%;
            text-decoration: none;
            font-size: 40px;
            transform: translate(0, -50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: #fff;
        }

        .pre {
            left: 0;
        }

        .next {
            right: 0;
        }


        /*  */
    </style>
</head>

<body>
    <div class="view">
        <ul>
            <!-- 每一个li就是一个结构块 -->
            <li>
                <!-- 每一个span是这个结构中的某一个面,span1是第一张图的第一个部分 spn2是第二张图的第一个部分-->
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
            <li>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </li>
        </ul>
        <a href="javascript:;" class="pre"  onclick=" on()">&lt;</a>
        <a href="javascript:;" class="next" onclick=" next()">&gt;</a>
    </div>
<script>
    // 创建图片的索引
    var index = 0;
    // 添加一个阀门，防止多次点击
    var flag = true;

    //下一张图片
    function next() {
        if(flag){
            flag = false;
            index--;
            //获取所有li对象
            var li = document.getElementsByTagName("li");
            // 通过循环迭代所有li对象，添加新的样式内容
            for(var i = 0;i<li.length;i++){
                console.log(li)//4*4li
                li[i].style.transform = "rotateY("+(index*90)+"deg)";

最低0.47元/天解锁文章

努力，加油，奋斗

关注

3
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
js jQ轮播图（三种）

第一种:用了css3进行3D效果轮播完整代码：<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" co...
复制链接

扫一扫