[英]Can anyone tell me what's wrong with this switch statement (javascript)?
Hey all, its your typical slider - both automated and controlled by user click. 嘿,这是您的典型滑块-自动化和由用户点击控制。 Problem is when you click, if you are on last slide,it shouldn't show right arrow, and if you are on first slide, it shouldn't show left arrow.
问题是单击时,如果您在最后一张幻灯片上,则不应显示向右箭头,如果您在第一张幻灯片上,则不应显示向左箭头。 If you are anywhere else, it should show both arrows.
如果您在其他任何地方,它应该同时显示两个箭头。 However, when on last slide it still shows right arrow.
但是,在最后一张幻灯片上时,它仍然显示向右箭头。 However, when on first slide, it correctly doens't show left arrow.
但是,在第一张幻灯片上时,它不会正确显示左箭头。 But then when you get to middle slides, it doesn't bring back right arrow:
但是,当您转到中间幻灯片时,它不会带回右箭头:
$(".paging").show();
$(".image_reel img:first").addClass("active");
$active = $(".image_reel img:first");
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
$(".image_reel").css({'width' : imageReelWidth});
rotate = function(){
var triggerId = $active.attr('src').substring(7,8);
var image_reelPosition = (triggerId - 1) * imageWidth;
$(".image_reel img").removeClass("active");
$active.addClass("active");
switch ($active.attr('src')) {
case "images/4.png":
var $lastPic = $active.attr("src");
manageControls($lastPic);
break;
case "images/1.png":
var $firstPic = $active.attr('src');
manageControls($firstPic);
break;
case "image/2.png":
var $standardPic = $active.attr('src');
manageControls($standardPic);
break;
case "image/3.png":
var $standardPic = $actice.attr('src');
manageControls($standardPic);
break;
}
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
rotateSwitch = function(){
play = setInterval(function(){
if(!$(".paging a").show()) $(".paging a").show(); //This is CRITICAL - this makes sure the arrows reappear after they have been removed
$active = $(".image_reel img.active").parent().next().find("img");
if ($active.length === 0){
$active = $('.image_reel img:first');
var $firstPic = $active.attr("src");
manageControls($firstPic);
}
rotate();
}, 5000);
};
rotateSwitch();
$(".paging a").click(function(){
$active = ($(this).attr('id')=='rightCtr') ? $(".image_reel img.active").parent().next().find('img') : $(".image_reel img.active").parent().prev().find('img');
if ($active.length === 0){
$active = $('.image_reel img:first');
}
clearInterval(play);
rotate();
rotateSwitch();
return false;
});
manageControls = function(whichImg){
(whichImg == "images/4.png") ? $(".paging a#rightCtr").hide() : $(".paging a#rightCtr").show();
(whichImg == "images/1.png") ? $(".paging a#leftCtr").hide() : $(".paging a#rightCtr").show();
if(whichImg != "images/1.png" || whichImg != "images/4.png"){
$(".paging a#rightCtr").show();
$(".paging a#rightCtr").show();
}
};
html: 的HTML:
<div class="window">
<div class="image_reel">
<a href="#"><img src="images/1.png" alt="" /></a>
<a href="#"><img src="images/2.png" alt="" /></a>
<a href="#"><img src="images/3.png" alt="" /></a>
<a href="#"><img src="images/4.png" alt="" /></a>
</div>
</div>
<div class="paging">
<a href="#" id="leftCtr">Left</a>
<a href="#" id="rightCtr">Right</a>
</div>
</div>
Thanks for any response. 感谢您的任何回复。
It is working, you just have a typo: 它正在工作,您只有一个错字:
var $standardPic = $actice.attr('src');
^
should be 应该
var $standardPic = $active.attr('src');
Notes: 笔记:
switch
statement, especially with the help of jquery
selectors. switch
语句,尤其是在jquery
选择器的帮助下。 firebug
, it helps with javascript debugging and web development in general, and it has a console that shows errors. firebug
,它通常可以帮助进行javascript调试和Web开发,并且具有显示错误的控制台。 The switch
statement is weird, but it's OK I think. switch
语句很奇怪,但是我认为可以。 I believe that the problem is with that "manageControls" function. 我相信问题出在“ manageControls”功能上。 Inside the last
if
statement, you do the same thing twice. 在最后一个
if
语句中,您将同一件事执行两次。 Also the expression in the if
will always be true. 而且
if
的表达式将始终为true。
I said that the switch
is "weird" because, well, it is: 我说这个
switch
很“奇怪”,因为它是:
switch ($active.attr('src')) {
case "images/4.png":
var $lastPic = $active.attr("src");
manageControls($lastPic);
break;
OK. 好。 So for that first
case
, you now know that the "src" attribute of the active element is "images/4.png". 因此,对于第一种
case
,您现在知道活动元素的“ src”属性是“ images / 4.png”。 So, if you know that, why do you need to get it again to set the "$lastPic" variable? 因此,如果知道这一点,为什么还要再次设置它来设置“ $ lastPic”变量? Why do you need those variables at all?
为什么根本需要这些变量? Why not just collapse the entire
switch
down to 为什么不将整个
switch
折叠到
manageControls($active.attr('src'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.