Question

美好的一天。我在我的横幅中做了一些这样的设计（saksoff5th.com）我使用的是slideToggle。当我将图像悬停在左侧时，右侧的横幅图像将会改变。但是我在将图像悬停在右侧时遇到了困难。就像我将图像悬停在左侧时，右侧的图像是错误的。我也不知道如何让我的图像在正确的部分正确显示。它们都是一个垂直的。我希望它的工作方式就像我将第一张图像悬停在左侧，右侧的第一张图像就会出现。当我将第二张图像悬停在右侧时，将出现第二张图像，第一张图像将隐藏等。

这是我的jsfiddle（http://jsfiddle.net/deanilvincent/7Lgks56u/2/）注意：它现在正在工作！感谢您的帮助：D

帮我解决这个问题。提前谢谢。

我的HTML标记：

<div class="container">
    <div id="left-panel">
        <ul>
            <li class="first-left"><a href="#"><img src="images/1st.png" /></a></li>
            <li class="second-left"><a href="#"><img src="images/2nd.png" /></a></li>
            <li class="third-left"><a href="#"><img src="images/3rd.png" /></a></li>
            <li class="fourth-left"><a href="#"><img src="images/4th.png" /></a></li>
        </ul>
    </div>

    <div id="right-panel">
        <ul>
        <li class="first-right"><a href="#"><img src="images/banner1.jpg" /></a></li>
        <li class="second-right"><a href="#"><img src="images/banner2.jpg" /></a></li>
        <li class="third-right"><a href="#"><img src="images/banner3.jpg" /></a></li>
        <li class="fourth-right"><a href="#"><img src="images/banner4.jpg" /></a></li>
        </ul>
    </div>
</div>

我的Javascript / Jquery：

$(document).ready(function(){
        $("#left-panel ul li.first-left").mouseover(function(){
            $("#right-panel ul li.first-right").slideToggle("Fast");
        });

        $("#left-panel ul li.second-left").mouseover(function(){
            $("#right-panel ul li.second-right").slideToggle("Fast");
        });

        $("#left-panel ul li.third-left").mouseover(function(){
            $("#right-panel ul li.third-right").slideToggle("Fast");
        });

        $("#left-panel ul li.fourth-left").mouseover(function(){
            $("#right-panel ul li.fourth-right").slideToggle("Fast");
        });
    });

我的CSS：

.container{
        width:1200px;
        margin:0px auto;
    }
    #left-panel{
        width:20%;
        float:left;
    }
    #left-panel ul li a:hover{
        background-color:#eeeeee;
    }
    #left-panel ul li{
        list-style-type:none;
    }
    #right-panel ul li{
        list-style-type:none;
    }
    #right-panel{
        width:80%;
        float:left;
    }

Answer 1

你没有在小提琴中包含jQuery（从左边的菜单中）

这是一个有效的演示：http://jsfiddle.net/mirohristov/7Lgks56u/5/

     //Hide all except the first
    $("#right-panel ul li").not("#right-panel ul li.first-right").stop().slideUp("Fast");


    $("#left-panel ul li.first-left").mouseover(function(){
        //Hide all
        $("#right-panel ul li").stop().slideUp("Fast");
        //Show the first 
        $("#right-panel ul li.first-right").stop().slideDown("Fast");
    }); 

//etc...

Answer 2

我认为您在JSFiddle中的代码无法正常工作，因为您没有导入jquery，它只是一个细节。无论何时，如果要在左侧图像上输入鼠标并且仅显示该图像时要显示正确的右图像，您必须准确写入，例如，如果您在第二个图像上输入鼠标左图像，所以第二个右图像 slidetoggle ，其他图像将隐藏，这就是想法，这里是丑陋的片段，但它有效：

$(document).ready(function(){
  $("#left-panel ul li.first-left").mouseover(function(){
    if (!$("#right-panel ul li.first-right").is(":visible")) 
      $("#right-panel ul li.first-right").slideToggle("Fast");
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.second-left").mouseover(function(){
    if (!$("#right-panel ul li.second-right").is(":visible")) 
      $("#right-panel ul li.second-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.third-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.third-left").mouseover(function(){
    if (!$("#right-panel ul li.third-right").is(":visible")) 
      $("#right-panel ul li.third-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.fourth-right").hide();
  });

  $("#left-panel ul li.fourth-left").mouseover(function(){
    if (!$("#right-panel ul li.fourth-right").is(":visible"))
      $("#right-panel ul li.fourth-right").slideToggle("Fast");
    $("#right-panel ul li.first-right").hide();
    $("#right-panel ul li.second-right").hide();
    $("#right-panel ul li.third-right").hide();
  });
});

，你必须在样式表上添加：

#right-panel li {
  display: none;
}

#right-panel li:nth-child(1) {
  display: block;
}

这是因为，默认情况下，最初会显示第一张图片。

将鼠标悬停在左侧，然后使用幻灯片切换更改右侧的图像

2 个答案: