jquery圆形立体图片旋转滚动

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。圆形立体图片旋转滚动是一种视觉效果，通常用于网站的首页或轮播图，以吸引用户的注意力。

类型

CSS3 动画：利用 CSS3 的 transform 和 animation 属性实现旋转效果。
JavaScript/jQuery 动画：通过 JavaScript 或 jQuery 编写动画逻辑，控制图片的旋转。

应用场景

网站首页：作为网站的视觉焦点，吸引用户的注意力。
产品展示：在电商网站中展示产品，增加产品的吸引力。
广告轮播：在广告位展示多个广告，通过旋转效果增加曝光率。

示例代码

以下是一个使用 jQuery 和 CSS3 实现圆形立体图片旋转滚动的示例代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>圆形立体图片旋转滚动</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="carousel">
        <div class="carousel-inner">
            <img src="image1.jpg" alt="Image 1">
            <img src="image2.jpg" alt="Image 2">
            <img src="image3.jpg" alt="Image 3">
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.carousel {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    position: relative;
}

.carousel-inner {
    display: flex;
    transition: transform 5s linear infinite;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

JavaScript (script.js)

$(document).ready(function() {
    const images = $('.carousel-inner img');
    let index = 0;

    setInterval(function() {
        index++;
        if (index >= images.length) {
            index = 0;
            $('.carousel-inner').css('transition', 'none');
            $('.carousel-inner').css('transform', `rotate(${index * 360 / images.length}deg)`);
            setTimeout(function() {
                $('.carousel-inner').css('transition', 'transform 5s linear infinite');
            }, 50);
        } else {
            $('.carousel-inner').css('transform', `rotate(${index * 360 / images.length}deg)`);
        }
    }, 5000);
});