Question

每次单击“下一步”时，如何在没有第一张图像的情况下旋转转盘。我有以下代码：

var image = 0;

$('.next').click(function(e) {

    image++;
    e.stopPropagation();

    $("#1").animate({  borderSpacing: -45*image }, {
    step: function(now,fx) {
        $(this).css('-webkit-transform','rotateY('+now+'deg)');
        $(this).css('-moz-transform','rotateY('+now+'deg)');
        $(this).css('transform','rotateY('+now+'deg)');
    },
        duration:'slow'
    },'linear');
});

我想要一个旋转木马，当我们点击“下一步”时，只需切换到下一张图片。您可以找到demo here。

由于

Answer 1

我使用过CSS3转换而不是jquery animate。然后添加了css而不是调用animate()

检查这个小提琴： https://jsfiddle.net/va964ze4/5/

您可以在CSS中更改过渡效果和速度

transition: all 1s;

Answer 2

我已添加了上一页按钮和下一步按钮。

＆＃13;

var image = 0;

// Click Previous button
$('.prev').click(function(e) {
	image--;
	e.stopPropagation();
	$("#1").css({
  	"borderSpacing": -45*image,
  	"transform": "rotateY("+parseInt(-45*image)+"deg)"
  });
});

// Click Next button
$('.next').click(function(e) {
	image++;
	e.stopPropagation();
	$("#1").css({
  	"borderSpacing": -45*image,
  	"transform": "rotateY("+parseInt(-45*image)+"deg)"
  });
});

＆＃13;

#wrapper{
  width: 600px;
  -webkit-perspective: 800px; /* Distance du carroussel */
  perspective: 800px; /* Distance du carroussel */
  margin: 100px auto 0 auto;
}

.carrousel{
  width: 200px; /* Centrer carroussel */
  height: 200px; /* Incliner le carrousel */
  margin: 0 auto; /* Placer la carrousel */
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
}

.plan{
  position:absolute;
  height: 100%; /* Hauteur de l'image */
  width: 150px; /* Largeur de l'image */
  text-align:center;
  font-size: 8em;
  color:#FFF;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

@-webkit-keyframes Caroussel{
  from {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg)
  }
  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg)
  }
}



.p1{
  background-color: red;
  -webkit-transform: translateZ(200px);
  transform: translateZ(200px)
}
.p2{
  background-color: orange;
  -webkit-transform: rotateY(45deg) translateZ(200px);
  transform: rotateY(45deg) translateZ(200px)
}
.p3{
  background-color: yellow;
  -webkit-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}

.p4{
  background-color: blue;
  -webkit-transform: rotateY(135deg) translateZ(200px);
  transform: rotateY(135deg) translateZ(200px)
}
.p5{
  background-color: purple;
  -webkit-transform: rotateY(180deg) translateZ(200px);
  transform: rotateY(180deg) translateZ(200px)
}
.p6{
  background-color: brown;
  -webkit-transform: rotateY(225deg) translateZ(200px);
  transform: rotateY(225deg) translateZ(200px)
}
.p7{
  background-color: grey;
  -webkit-transform: rotateY(270deg) translateZ(200px);
  transform: rotateY(270deg) translateZ(200px)
}
.p8{
  background-color: pink;
  -webkit-transform: rotateY(315deg) translateZ(200px);
  transform: rotateY(315deg) translateZ(200px)
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="1" class="carrousel">
    <figure>
      <div class="plan p1">1</div>
      <div class="plan p2">2</div>
      <div class="plan p3">3</div>
      <div class="plan p4">4</div>
      <div class="plan p5">5</div>
      <div class="plan p6">6</div>
      <div class="plan p7">7</div>
      <div class="plan p8">8</div>
    </figure>
  </div>

  <div style="margin-top: 50px; text-align: center;">
    <button type="button" class="prev">Prev</button>
    <button type="button" class="next">Next</button>
  </div>
</div>

＆＃13;

Answer 3

我认为此代码是您问题的解决方案吗？

<强> // HTML

<div class="item a">A</div>

<div class="item b">B</div>

<div class="item c">C</div>

<div class="item d">D</div>

<div class="item e">E</div>

<div class="item f">F</div>

“这里div class =”next“Next”

“这里的div class =”prev“Prev”

<强> // CSS

body {

背景：＃333;

填充：70px 0;

font：15px / 20px Arial，sans-serif;

}

.container {

保证金：0自动;

宽度：250px;

身高：200px;

职位：相对;

透视：1000px;

}

.carousel {

身高：100％;

宽度：100％;

位置：绝对;

transform-style：preserve-3d;

过渡：变换1s;

}

.item {

display：block;

位置：绝对;

背景：＃000;

宽度：250px;

身高：200px;

行高：200px;

font-size：5em;

text-align：center;

颜色：#FFF;

不透明度：0.95;

border-radius：10px;

}

.a {

transform：rotateY（0deg）translateZ（250px）;

背景：＃ed1c24;

}

.b {

transform：rotateY（60deg）translateZ（250px）;

背景：＃0072bc;

}

.c {

transform：rotateY（120deg）translateZ（250px）;

背景：＃39b54a;

}

.d {

transform：rotateY（180deg）translateZ（250px）;

背景：＃f26522;

}

.e {

transform：rotateY（240deg）translateZ（250px）;

背景：＃630460;

}

.f {

transform：rotateY（300deg）translateZ（250px）;

背景：＃8c6239;

}

.next，.prev {

颜色：＃444;

位置：绝对;

top：100px;

填充：1em 2em;

cursor：pointer;

背景：#CCC;

border-radius：5px;

border-top：1px solid #FFF;

box-shadow：0 5px 0＃999;

过渡：box-shadow 0.1s，最高0.1s;

}

.next：hover，.prev：hover {color：＃000; }

.next：active，.prev：active {

top：104px;

box-shadow：0 1px 0＃999;

}

.next {right：5em; }

.prev {left：5em; }

<强> // JS

var carousel = $（“。carousel”），

currdeg  = 0;

$（“。next”）。on（“click”，{d：“n”}，旋转）;

$（“。prev”）。on（“click”，{d：“p”}，旋转）;

function rotate（e）{

如果（e.data.d == “N”）{

currdeg = currdeg - 60;

}

如果（e.data.d == “P”）{

currdeg = currdeg + 60;

}

carousel.css（{

"-webkit-transform": "rotateY("+currdeg+"deg)",

"-moz-transform": "rotateY("+currdeg+"deg)",

"-o-transform": "rotateY("+currdeg+"deg)",

"transform": "rotateY("+currdeg+"deg)"

}）;

}

Answer 4

我已将一些代码更改为您现有的 JS ，并将一个css属性过渡添加到您的CSS中。

添加CSS 过渡：全1; 用于增加或减少轮播的旋转速度。我希望这个片段可以帮助你。

	var image = 0;

	$('.next').click(function(e) {

		image++;
		e.stopPropagation();

		$("#1").animate({  borderSpacing: -45*image }, {
		step: function(now,fx) {
			$(this).css('-webkit-transform','rotateY('+parseInt(-45*image)+'deg)');
			$(this).css('-moz-transform','rotateY('+parseInt(-45*image)+'deg)');
			$(this).css('transform','rotateY('+parseInt(-45*image)+'deg)');
		},
			duration:'slow'
		},'linear');
	});

#wrapper{
  width:600px;
  -webkit-perspective: 800px; /* Distance du carroussel */
  perspective: 700px; /* Distance du carroussel */
  margin: 100px auto 0 auto;
}

.carrousel{
  width: 200px; /* Centrer carroussel */
  height: 200px; /* Incliner le carrousel */
  margin: 0 auto; /* Placer la carrousel */
  -webkit-transform-style: preserve-3d;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s; /*Add this transition for increase or decrease rotattion speed*/
  
  /*-webkit-animation: Caroussel 10s infinite linear;  */

}

.plan{
  position:absolute;
  height: 100%; /* Hauteur de l'image */
  width: 150px; /* Largeur de l'image */
  text-align:center;
  font-size: 8em;
  color:#FFF;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  transition: all 1s;
  background-color: rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

@-webkit-keyframes Caroussel{

  from {
    -webkit-transform: rotateY(0);
    transform: rotateY(0)
  }
  to {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg)
  }
}



.p1{
  background-color: red;
  -webkit-transform: translateZ(200px);
  transform: translateZ(200px)
}
.p2{
  background-color: orange;
  -webkit-transform: rotateY(45deg) translateZ(200px);
  transform: rotateY(45deg) translateZ(200px)
}
.p3{
  background-color: yellow;
  -webkit-transform: rotateY(90deg) translateZ(200px);
  transform: rotateY(90deg) translateZ(200px);
}

.p4{
  background-color: blue;
  -webkit-transform: rotateY(135deg) translateZ(200px);
  transform: rotateY(135deg) translateZ(200px)
}
.p5{
  background-color: purple;
  -webkit-transform: rotateY(180deg) translateZ(200px);
  transform: rotateY(180deg) translateZ(200px)
}
.p6{
  background-color: brown;
  -webkit-transform: rotateY(225deg) translateZ(200px);
  transform: rotateY(225deg) translateZ(200px)
}
.p7{
  background-color: grey;
  -webkit-transform: rotateY(270deg) translateZ(200px);
  transform: rotateY(270deg) translateZ(200px)
}
.p8{
  background-color: pink;
  -webkit-transform: rotateY(315deg) translateZ(200px);
  transform: rotateY(315deg) translateZ(200px)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="wrapper">
  <div id="1" class="carrousel">
    <figure>
      <div class="plan p1"></div>
      <div class="plan p2"></div>
      <div class="plan p3"></div>
      <div class="plan p4"></div>
      <div class="plan p5"></div>
      <div class="plan p6"></div>
      <div class="plan p7"></div>
      <div class="plan p8"></div>
    </figure>
  </div>
  <button class="next" style="margin-bottop: 10px">Next</button>
</div>

Carrousel变换旋转

4 个答案: