我正在旋转圆圈，点击其中的按钮，并根据活动标签显示内容。 圆圈每次必须旋转72度。 我已经完成了360度，但我希望它能够连续旋转并根据它显示内容。
选中此http://jsfiddle.net/fjd64gwk/
请检查以下代码 - 我的HTML代码：
<div class="main_container">
<div id="pin_wheel">
<div id="pin_wheel_items">
<div class="spin_btn"><span class="arrow">SPIN</span></div>
<div class="left" id="spinCircle">
<span class="spin_feedback">
<img src="images/icon-1 speech buble.png" class="default_img" />
<div style="clear:both"></div>
<label>Send and Give Feedback</label>
</span>
<span class="spin_success">
<img src="images/icon-5 success.png" class="default_img" />
<div style="clear:both"></div>
<label>Celebrate The Success Of Others</label>
</span>
<span class="spin_challanges">
<img src="images/icon2 lock.png" class="default_img" />
<div style="clear:both"></div>
<label>Seek Challanges</label>
</span>
<span class="spin_effort">
<img src="images/icon 4 tools.png" class="default_img" />
<div style="clear:both"></div>
<label>Preserve With Effort</label>
</span>
<span class="spin_obstacles">
<img src="images/icon3 Navigate.png" class="default_img" />
<div style="clear:both"></div>
<label>Navigate Obstacles</label>
</span>
</div>
<div class="right">
<label class="spin_the_wheel">Spin The Wheel</label>
<div class="info challanges-info">
<div class="content_right"><label class="label_right">Seek Challenges</label><img class="clip_img" src="images/icon_clip.png"/></div>
<div class="clearfix"></div>
<label class="label_heading">Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_img" src="images/icon_Growth-mindset.png" />
<ul>
<li>Seeks out challenges</li>
<li>Questions the status quo</li>
<li>Takes informed risks</li>
</ul>
<hr />
<label class="label_heading">Inner Voice of a Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
<p>‘Wow, that’s going to test me. I feel a bit uncertain about what the result will be. But, bring it on.’</p>
<hr />
<label class="label_heading">Fixed Mindset</label>
<div class="clearfix"></div>
<img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
<p>Stays away from a new or difficult task for the fear of failure</p>
</div>
<div class="info success-info">
<div class="content_right"><label class="label_right">Celebrate Success of Others</label><img class="clip_img" src="images/icon_clip.png"/></div>
<div class="clearfix"></div>
<label class="label_heading">Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_img" src="images/icon_Growth-mindset.png" />
<ul>
<li>Looks for inspiration in the success of others</li>
<li>Models and shares the best practices</li>
</ul>
<hr />
<label class="label_heading">Inner Voice of a Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
<p>‘It wasn’t my idea, but I love what they’ve done. Kudos to them. I’m going to reach out and see how I can learn from them on my next project.’
</p>
<hr />
<label class="label_heading">Fixed Mindset</label>
<div class="clearfix"></div>
<img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
<p>Resents or dismisses the success of others and hoards information and resources.</p>
</div>
<div class="info feedback-info">
<div class="content_right"><label class="label_right">Seek and Give Feedback</label><img class="clip_img" src="images/icon_clip.png"/></div>
<div class="clearfix"></div>
<label class="label_heading">Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_img" src="images/icon_Growth-mindset.png" />
<ul>
<li>Seeks and gives constructive feedback</li>
<li>Value Feedback</li>
</ul>
<hr />
<label class="label_heading">Inner Voice of a Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
<p>‘This is tough to hear, but I’m going to stay open-minded because I know I’ll learn something.’</p>
<hr />
<label class="label_heading">Fixed Mindset</label>
<div class="clearfix"></div>
<img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
<p>Feels insulted by criticism</p>
</div>
<div class="info effort-info">
<div class="content_right"><label class="label_right">Persevere With Effort</label><img class="clip_img" src="images/icon_clip.png"/></div>
<div class="clearfix"></div>
<label class="label_heading">Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_img" src="images/icon_Growth-mindset.png" />
<ul>
<li>Shows determination and perseverance to get better</li>
</ul>
<hr />
<label class="label_heading">Inner Voice of a Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
<p>‘Phew, this doesn’t come easily to me, but I’m going to stick it out. I know I’ll get better if I’m persistent.’</p>
<hr />
<label class="label_heading">Fixed Mindset</label>
<div class="clearfix"></div>
<img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
<p>Tries to appear effortlessly smart, views hard work as a sign of inability, and gives up when the going gets tough.</p>
</div>
<div class="info obstacles-info">
<div class="content_right"><label class="label_right">Navigate Obstacles</label><img class="clip_img" src="images/icon_clip.png"/></div>
<div class="clearfix"></div>
<label class="label_heading">Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_img" src="images/icon_Growth-mindset.png" />
<ul>
<li>Reflects on what was learned from mistakes</li>
<li>Applies previous learning when formulating new strategies</li>
</ul>
<hr />
<label class="label_heading">Inner Voice of a Growth Mindset</label>
<div class="clearfix"></div>
<img class="growth_mindset_img" src="images/Icon_inner-voice.png" />
<p>‘That didn’t work as I thought it would. How can I approach the problem differently and what can I learn from my first try?’</p>
<hr />
<label class="label_heading">Fixed Mindset</label>
<div class="clearfix"></div>
<img class="fixed_mindset_img" src="images/icon-_fixed-mindset.png" />
<p>Hides mistakes and avoids sharing failures</p>
</div>
</div>
</div>
</div>
</div>
我的剧本：
$(document).ready(function() {
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).animate({
textIndent: 0
}, {
step: function(now, fx) {
$(this).css({
'-webkit-transform': 'rotate(' + degrees + 'deg)',
'-moz-transform': 'rotate(' + degrees + 'deg)',
'-ms-transform': 'rotate(' + degrees + 'deg)',
'transform': 'rotate(' + degrees + 'deg)',
'transition-duration': '2s'
});
},
duration: 'slow'
}, 'linear');
};
$(".spin_btn").click(function() {
$(".spin_the_wheel").hide();
rotation += 72;
var increaseVal = rotation;
$("#spinCircle").rotate(rotation);
if (rotation == 72) { //success
$(".success-info").show();
$(".spin_success").addClass("active");
$(".active").css({
'background': 'none'
});
$(".active").append("<img class='apnd_img' src='./images/green_success.png'><label class='apnd_lbl'>Celebrate The Success Of Others</label>");
} else if (rotation == 144) { //feedback
$(".success-info").hide();
$(".feedback-info").show();
if (!$(".spin_feedback").find('.apnd_img1').length) {
$(".spin_success").removeClass('active').css('background-image', 'url(./images/b2.png)');
$(".spin_success .apnd_img, .spin_success .apnd_lbl").remove();
$(".spin_feedback").addClass('active');
$(".active").css({
'background': 'none'
});
$(".active").append("<img class='apnd_img1' src='./images/green_speech-bubble.png'><label class='apnd_lbl1'>Send and Give Feedback</label>");
}
} else if (rotation == 216) { //effort
$(".feedback-info").hide();
$(".effort-info").show();
if (!$(".spin_effort").find('.apnd_img2').length) {
$(".spin_feedback").removeClass('active').css('background-image', 'url(./images/b1.png)');
$(".spin_feedback .apnd_img1, .spin_feedback .apnd_lbl1").remove();
$(".spin_effort").addClass('active');
$(".active").css({
'background': 'none'
});
$(".active").append("<img class='apnd_img2' src='./images/Green_tool.png'><label class='apnd_lbl2'>Preserve With Effort</label>");
}
} else if (rotation == 288) { //obstacles
$(".effort-info").hide();
$(".obstacles-info").show();
if (!$(".spin_obstacles").find('.apnd_img3').length) {
$(".spin_effort").removeClass('active').css('background-image', 'url(./images/b5.png)');
$(".spin_effort .apnd_img2, .spin_effort .apnd_lbl2").remove();
$(".spin_obstacles").addClass('active');
$(".active").css({
'background': 'none'
});
$(".active").append("<img class='apnd_img3' src='./images/green_navigate.png'><label class='apnd_lbl3'>Navigate Obstacles</label>");
}
} else { // challanges
$(".obstacles-info").hide();
$(".challanges-info").show();
if (!$(".spin_challanges").find('.apnd_img4').length) {
$(".spin_obstacles").removeClass('active').css('background-image', 'url(./images/b4.png)');
$(".spin_obstacles .apnd_img3, .spin_obstacles .apnd_lbl3").remove();
$(".spin_challanges").addClass('active');
$(".active").css({
'background': 'none'
});
$(".active").append("<img class='apnd_img4' src='./images/green_lock.png'><label class='apnd_lbl4'>Seek Challanges</label>");
}
rotation -= 72
}
});
}）;
我的CSS：
.clearfix{clear:both;}
.main_container {width:1000px;height:600px;}
hr {
color:#fff;
}
/* Just for positioning the menu correctly */
.main_container #pin_wheel {
position: relative;
width: 650px;
margin: 0px auto;
top: 100px;
left: 37px;
}
.main_container #pin_wheel_items {
width:836px;
height:416px;
background-image:url(../images/blue-bg.png);
}
.main_container .spin_btn{
height:93px;
width:93px;
background-image:url(../images/spin_center-circle.png);
line-height:50px;
font-weight:bold;
font-size:16px;
text-align:center;
color:#009bbb;
position: absolute;
top: 160px;
left: 25%;
cursor:pointer;
z-index: 1;
}
.main_container .arrow{
width:52px;
height:47px;
background-image:url(../images/arrow.png);
margin: 21px 0 0 21px;
float: left;
}
.main_container .left{
margin: 15px 0 0 15px;
float: left;
}
#pin_wheel_items .left label{
font-size:16px;
color:#009bbb;
float:left;
width: 124px;
margin: 8px 0 0 33px;
text-transform: uppercase;
}
span.spin_challanges label {
margin: 8px 0 0 66px !important;
}
#pin_wheel_items .right{
height:416px;
width: 345px;
float: left;
margin: 5px 0 0 24px;
}
#pin_wheel_items .right .spin_the_wheel{
font-size:36px;
color:#fff;
margin: 180px 0 0 30px;
float: left;
}
.main_container .info{display:none;}
.main_container .spin_challanges, .main_container .spin_obstacles, .main_container .spin_effort,.main_container .spin_feedback,.main_container .spin_success{
float:left;
background-repeat: no-repeat;
text-align: center;
}
.main_container .spin_feedback{
background-image:url(../images/b1.png);
width:198px;
height:190px;
margin:0;
}
span.spin_feedback img {
margin: 65px 0 0 75px;
}
.main_container .spin_success{
background-image:url(../images/b2.png);
width:222px;
height:198px;
margin: -9px 0 0 -59px;
}
span.spin_success img {
margin: 31px 0 0 79px;
}
.main_container .spin_challanges{
background-image:url(../images/b3.png);
width:199px;
height:235px;
margin: 74px 0 0 -160px;
}
span.spin_challanges img {
margin: 80px 0 0 110px;
}
.main_container .spin_obstacles{
background-image:url(../images/b4.png);
width:224px;
height:198px;
margin: 193px 0 0 -263px;
}
span.spin_obstacles img {
margin: 63px 0 0 75px;
}
.main_container .spin_effort{
background-image:url(../images/b5.png);
width:199px;
height:191px;
margin:190px 0 0 -401px;
}
span.spin_effort img {
margin: 35px 0 0 69px;
}
.left span img {
float: left;
}
.content_right {
float: right;
}
label.label_right {
float: left;
color: #fff;
font-size: 14px;
margin: 8px -13px 30px 0;
}
.clip_img{
position: absolute;
right: -29%;
top: -1px;
}
label.label_heading {
color: #fff;
font-size: 24px;
float: left;
}
.info p, .info ul li {
color:#fff;
font-size:12px;
margin: 0 0 0 15px;
}
.info p{
padding: 10px 0 15px 0;
}
img.growth_img, img.growth_mindset_img, img.fixed_mindset_img{
float: left;
margin: 19px 0 0 2px;
padding: 0 10px 0 0px;
}
.active .apnd_img{margin:-22px 0 0 -102px !important;-webkit-transform:rotate(-72deg);-moz-transform:rotate(-72deg); -ms-transform:rotate(-72deg); transform: rotate(-72deg);}
.active .apnd_lbl{margin: -75px 0 0 62px !important; -webkit-transform:rotate(-72deg);-moz-transform:rotate(-72deg); -ms-transform:rotate(-72deg); transform: rotate(-72deg);color:#fff !important;}
.active .apnd_img1{ margin: 22px 0 0 -102px !important; -webkit-transform:rotate(-144deg); -moz-transform:rotate(-144deg); -ms-transform:rotate(-144deg); transform: rotate(-144deg);}
.active .apnd_lbl1{ margin: -75px 0 0 41px !important; -webkit-transform:rotate(-144deg); -moz-transform:rotate(-144deg); -ms-transform:rotate(-144deg); transform: rotate(-144deg); color:#fff !important;}
.active .apnd_img2{ margin: 0 0 0 -55px !important; -webkit-transform:rotate(-216deg); -moz-transform:rotate(-216deg); -ms-transform:rotate(-216deg); transform: rotate(-216deg);}
.active .apnd_lbl2{ margin: -77px 0 0 30px !important; -webkit-transform:rotate(-216deg); -moz-transform:rotate(-216deg); -ms-transform:rotate(-216deg); transform: rotate(-216deg); color:#fff !important;}
.active .apnd_img3{ margin: -38px 0 0 -50px !important; -webkit-transform:rotate(-288deg); -moz-transform:rotate(-288deg); -ms-transform:rotate(-288deg); transform: rotate(-288deg);}
.active .apnd_lbl3{ margin: -58px 0 0 18px !important; -webkit-transform:rotate(-288deg); -moz-transform:rotate(-288deg); -ms-transform:rotate(-288deg); transform: rotate(-288deg); color:#fff !important;}
.active .apnd_img4{ margin: -66px 0 0 -90px !important; -webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform: rotate(-360deg);}
.active .apnd_lbl4{ margin: -58px 0 0 55px !important; -webkit-transform:rotate(-360deg); -moz-transform:rotate(-360deg); -ms-transform:rotate(-360deg); transform: rotate(-360deg); color:#fff !important;}
答案 0 :(得分：1)
编辑： 现在显示正确的活动选项卡及其内容。 我已经更新了你的小提琴：http://jsfiddle.net/fjd64gwk/6/
var timesRotated = 0;
...
if(rotation == ((timesRotated * 360) + 72)){ //success
我做了什么：添加了一个timesRotated量，每完全旋转增加1。将时间乘以360加上您的角度，您将能够无限旋转。
我还更改了您的第一个'if'以隐藏“Challanges”标签并显示正确的标签。