Question

嘿所有，它是您的典型滑块 - 既可以自动控制也可以通过用户点击控制。问题是当你点击时，如果你在最后一张幻灯片上，它不应该显示右箭头，如果你在第一张幻灯片，它不应该显示左箭头。如果你在其他任何地方，它应该显示两个箭头。但是，在最后一张幻灯片上，它仍显示右箭头。但是，在第一张幻灯片上，它正确显示左箭头。但是当你进入中间幻灯片时，它不会带回右箭头：

    $(".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：

<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>

感谢您的回复。

Answer 1

它正在运作，你只是有一个错字：

        var $standardPic = $actice.attr('src');
                                ^

应该是

        var $standardPic = $active.attr('src');

备注：

您的代码可以更优雅的方式重写，您可以使用其他逻辑而不是switch语句，尤其是在jquery选择器的帮助下。

使用firebug，它有助于javascript调试和Web开发，并且它有一个显示错误的控制台。

Answer 2

switch声明很奇怪，但我认为没关系。我认为问题在于“manageControls”功能。在最后一个if语句中，你做了两次相同的事情。此外，if中的表达式总是为真。

我说switch是“怪异的”，因为它是：

    switch ($active.attr('src')) {
    case "images/4.png":
        var $lastPic = $active.attr("src");
        manageControls($lastPic);
        break;

行。因此，对于第一个case，您现在知道活动元素的“src”属性是“images / 4.png”。所以，如果你知道，为什么你需要再次设置“$ lastPic”变量呢？为什么你需要这些变量？为什么不将整个switch折叠为

 manageControls($active.attr('src'));

谁能告诉我这个switch语句（javascript）有什么问题？

2 个答案: