使用jQuery实现旋转轮播图-优快云博客

本文介绍如何利用jQuery创建旋转轮播图，包括HTML、CSS和JavaScript代码实现的详细步骤，并提供了效果截图。需要完整源码的读者可以通过评论获取。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jquery旋转轮播图

html代码部分

**<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    </head>
<body>
<!--3d转换-->
<!--轴的正方形，translate roata(3d转换属性）-->
<!--rotatex rotateY rotateZ 旋转方向 方法套路-->
<!--过渡动画-->
<div class="box">
    <ul class="imagebox">
        <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>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
        <li>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </li>
    </ul>
    <!--转义符\  实体&lt-->
    <a class="left" href="javascript:;">&lt;</a>
    <a class="right" href="javascript:;">&gt;</a>
</div>
<script src="jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

css代码部分：

 *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 560px;
            height: 300px;
            margin: 100px auto 0;
            position: relative;

        }
        .box .imagebox{
            list-style:none ;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .box .imagebox li{
            width: 112px;
            height: 100%;
            float: left;
            position: relative;
            /*视距：呈现近大远小的效果*/
            /*perspective: 500px;*/
            /*3d呈现*/
            transform-style: preserve-3d;
            transition: all 1s;


        }
        .box .imagebox li span{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: url("images/1.jpg") no-repeat;
        }
        /*拼接立体容器*/
        /*1.立体容器的旋转中心在电脑平面上*/
        /*2.立体容器的每一个面的图片正面朝外*/
        .box .imagebox li span:nth-child(1){
            background-image: url("images/1.jpg");
            transform: translateZ(150px);
        }
        .box .imagebox li span:nth-child(2){
            /*旋转过会轴也会旋转*/
            background-image: url("images/2.jpg");
            transform: rotateX(90deg)translateZ(150px);
        }
        .box .imagebox li span:nth-child(3){
            background-image: url("images/3.jpg");
            transform: rotateX(180deg)translateZ(150px);
        }
        .box .imagebox li span:nth-child(4){
            background-image: url("images/4.jpg");
            transform: rotateX(270deg)translateZ(150px);
        }


        /*拼接背景*/
        .box .imagebox li:nth-child(1) span{
            background-position: 0 0;
        }
        .box .imagebox li:nth-child(2) span{
            background-position: -112px 0;
        }
        .box .imagebox li:nth-child(3) span{
            background-position: -224px 0;
        }
        .box .imagebox li:nth-child(4) span{
            background-position: -336px 0;
        }
        .box .imagebox li:nth-child(5) span{
            background-position: -448px 0;
        }
            /*.box .imagebox li img{*/
            /*display: block;*/
            /*width: 100%;*/
            /*height: 100%;*/
        /*}*/
        .box .left,
        .box .right{
            position: absolute;
            width: 50px;
            height: 70px;
            background: rgba(0,0,0,.2);
            top: 115px;
            text-align: center;
            line-height: 70px;
            font-size: 20px;
            color: #cccccc;
            text-decoration: none;
        }
        .box .right{
            right: 0;
        }

js代码部分

 $(function () {
        // 1.点击切换图片
        //  定义索引
        //  第二张图为 -90deg 第四张图我90deg
        var index=0;
        // 开关 默认是开的
        var flag=true;
        //2.点击左边的按钮 上一张
        $(".left").on('click',function () {
            if(!flag) return false;
            flag=false;
            index--;
            var angle=-index*90;
            $("li").css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                // 设置不同的延时
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        //3.点击右边的按钮 下一张
        $(".right").on('click',function () {
            if(!flag) return false;
            flag=false;
            index++;
            var angle=-index*90;
            $("li").css('transform','rotateX('+angle+'deg)').each(function (i,item) {
                // 设置不同的延时
                $(this).css('transition-delay',i*0.25+'s');
            });
        });
        /*4.优化 重复点击的时候动画会层叠的执行  节流阀 */
        $('li:last').on('transitionend',function () {
            /*最后一部分张图片旋转完毕*/
            flag = true;
        });

    });

效果截图如下所示，没有制作动态的图片，请见谅！
在这里插入图片描述