文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何制作弯曲的转盘/车轮旋转木马？

问如何制作弯曲的转盘/车轮旋转木马？
EN

Stack Overflow用户
提问于 2021-12-29 08:44:54
回答 1查看 74关注 0票数 0

我想做这样的事。如果旋转木马物品的容器是弯曲的，如果它们不在焦点上，它们就会向下移动。说明也应根据重点项目而改变。旋转木马可能不是自动播放的。

通过GIPHY

但这是我能想到的最接近的。我也在网上做了很多搜索，但我认为我的关键词可能不合适(关键词:拨号/轮式旋转木马)。你知道如何达到和GIF一样的效果吗？谢谢。

​

代码语言：javascript
复制
$(function(){

    $('.loop').on('initialized.owl.carousel translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        //$('.owl-item').eq(idx-2).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
        //$('.owl-item').eq(idx+2).addClass('medium');
    });


    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10,
        autoplay: true,
        autoPlay: 2000,
        stagePadding: 30
    })
});
代码语言：javascript
复制
.owl-carousel .owl-item.big div {background:#ac0000 !important;}

.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;}

.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;}

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.5);
  }

.owl-stage{
    left:-30
}

.owl-carousel .animated { 
  animation-duration: 5000ms;
  animation-fill-mode: both; }
代码语言：javascript
复制
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
  <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

​

owl-carousel-2
jquery
css
carousel
curve
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-29 09:47:21

你差点就完成了。

下面是到OwlCarousel的文档，您需要添加OwlCarousel选项。https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

您还可以添加一个" transform : transform 0.4s“，在这里您可以调用scale()，就像我在您的”transform: scale()“上有一个更平滑的转换一样。(根据你认为合适的时间调整)。

使用这两个更改，您应该达到预期的结果。

​

代码语言：javascript
复制
$(function(){

    $('.loop').on('initialized.owl.carousel translate.owl.carousel', function(e){
        idx = e.item.index;
        $('.owl-item.big').removeClass('big');
        $('.owl-item.medium').removeClass('medium');
        $('.owl-item').eq(idx).addClass('big');
        $('.owl-item').eq(idx-1).addClass('medium');
        //$('.owl-item').eq(idx-2).addClass('medium');
        $('.owl-item').eq(idx+1).addClass('medium');
        //$('.owl-item').eq(idx+2).addClass('medium');
    });


    $('.loop').owlCarousel({
        center: true,
        items:5,
        loop:true,
        margin:10,
        autoplay: true,
        autoPlay: 2000,
        stagePadding: 30,
        slideTransition: "linear"
    })
});
代码语言：javascript
复制
.owl-carousel .owl-item.big div {background:#ac0000 !important;}

.owl-carousel .owl-item.medium div {background:#008000 !important;
transform: scale(0.9);
object-position: 5px 50%;
transition: transform 0.4s;
}

.owl-carousel .owl-item div {background:#4B0082 !important;
transform: scale(0.6);
object-position: 0px 80%;
transition: transform 0.4s;}

.owl-carousel.owl-drag .owl-item.center .item {
    background: rgb(25, 0, 255) ;
    transform: scale(1.5);
    transition: transform 0.4s;
  }

.owl-stage{
    left:-30
}

.owl-carousel .animated { 
  animation-duration: 5000ms;
  animation-fill-mode: both; }
代码语言：javascript
复制
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel='stylesheet' href='http://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css' />
</head>
<div id="demos">
<div class="owl-carousel loop">
  <div class="item"><h4>1</h4></div>
        <div class="item"><h4>2</h4></div>
        <div class="item"><h4>3</h4></div>
        <div class="item"><h4>4</h4></div>
        <div class="item"><h4>5</h4></div>
        <div class="item"><h4>6</h4></div>
        <div class="item"><h4>7</h4></div>
        <div class="item"><h4>8</h4></div>
        <div class="item"><h4>9</h4></div>
        <div class="item"><h4>10</h4></div>
        <div class="item"><h4>11</h4></div>
        <div class="item"><h4>12</h4></div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70517062

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档