三個不同的onclick事件應顯示同一滑塊的三組不同的幻燈片

-3

我有一個滑塊，當用戶單擊圖像映射時，該滑塊變得可見。我的頁面上有3個不同的圖片地圖，每個圖片在激活時都會顯示不同的幻燈片組。目前，滑塊爲每個圖像地圖顯示相同的幻燈片。我怎樣才能做到這一點，而無需創建3個不同的滑塊。我希望使用一個滑塊來選擇正確的幻燈片，當其中一個圖像地圖被點擊時。封閉的是我的html和js文件。三個不同的onclick事件應顯示同一滑塊的三組不同的幻燈片

$(document).ready(function() { 

    $('#slider_option').click(function(){ 
     $('#slider').css('visibility','hidden'); 
     $('#slider_option').css('visibility','hidden'); 
     $('#gallery1').fadeTo(1200, 1,function(){ 

     }); 
    }); 

    var slideCount = $('#slider ul li').length; 
    var slideWidth = $('#slider ul li').width(); 
    var slideHeight = $('#slider ul li').height(); 
    var sliderUlWidth = slideCount * slideWidth; 

    $('#slider').css({ width: slideWidth, height: slideHeight }); 

    $('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth }); 

    $('#slider ul li:last-child').prependTo('#slider ul'); 

    function moveLeft() { 
     $('#slider ul').animate({ 
      left: + slideWidth 
      }, 200, function() { 
       $('#slider ul li:last-child').prependTo('#slider ul'); 
       $('#slider ul').css('left', ''); 
      }); 
    }; 

    function moveRight() { 
     $('#slider ul').animate({ 
      left: - slideWidth 
      }, 200, function() { 
       $('#slider ul li:first-child').appendTo('#slider ul'); 
       $('#slider ul').css('left', ''); 
      }); 
    }; 

    $('a.control_prev').click(function() { 
     moveLeft(); 
    }); 

    $('a.control_next').click(function() { 
     moveRight(); 
    }); 

    $('map').click(function(){ 

     $('#gallery1').fadeTo(1200, 0); 
     $('#slider').css('visibility','visible'); 
     $('#slider_option').css('visibility','visible'); 


    }); 

}); 


And here is my html: 


    <!DOCTYPE HTML> 

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>paulienlombard.com</title> 

    <link rel="stylesheet" type="text/css" href="index.css"> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <script type="text/javascript" src="index.js"></script> 

</head> 

<body> 

    <div id="container"> 

     <div id="content" class="clearfix"> 

      <div style="fgimg"> 


       <img src="homepage_im.png" class="fgimg" alt="homepage" width="960" height="600" usemap="#gallery" id="gallery1"/> 

       <map name="gallery" id="gallery"> 
        <area shape="rect" coords="25,225,200,450" style="outline:none" href="#" alt="" /> 
        <area shape="rect" coords="750,225,925,450" style="outline:none" href="#" alt="" /> 
        <area shape="rect" coords="375,275,575,425" style="outline:none" href="#" alt="" /> 
       </map> 
      </div>  

     </div> 

     <div id="header"> 

      <img src="logo_im.png" alt="Logo Paulien Lombard" id="logo"> 

     </div> 

     <div id="slider" class="gallery"> 
      <a href="#" class="control_next">&gt;</a> 
      <a href="#" class="control_prev">&lt;</a> 
      <ul> 
       <li><img src="dog.png" class="slide" alt="dog" id="im6"></li> 
       <li><img src="disk.png" class="slide" alt="disk" id="im7"></li> 
       <li><img src="fruit.png" class="slide" alt="fruit" id="im8"></li> 
       <li><img src="garden.png" class="slide" alt="garden" id="im9"></li> 
       <li><img src="girl.png" class="slide" alt="girl" id="im10"></li> 
       <li><img src="vondel.png" class="slide" alt="vondel" id="im1"></li> 
       <li><img src="rome2.png" class="slide" alt="rome2" id="im2"></li> 
       <li><img src="room.png" class="slide" alt="room" id="im3"></li> 
       <li><img src="rome.png" class="slide" alt="rome" id="im4"></li> 
       <li><img src="berkeley.png" class="slide" alt="berkeley" id="im5"></li> 
      </ul> 
     </div> 

     <div id="slider_option"> 
      &#10005; 
     </div> 

    </div> 


</body> 

</html>

來源

2014-11-02 paulien l

問題中的代碼太多。你有沒有考慮過一個jsFiddle來說明問題。你還應該描述你已經嘗試了什麼，以及你研究過什麼來到這裏。 – Kolban 2014-11-02 04:07:48

感謝您的回覆。我已經嘗試過的沙發並不算多。我對jquery很新。到目前爲止，我的方法是搜索現有的問題答案，並以這種方式從本網站獲得了很多幫助。憑藉我有限的知識，我只能想出創建3個不同的滑塊來實現上述目標，如果我沒有得到另一個建議，我會這樣做。不過，我希望有一種更優雅的做事方式。 – 2014-11-02 19:14:08

我們的問題不是我們希望以任何方式幫助我們理解如何做到這一點。你已經發布了很多代碼，並且正在詢問關於如何設計應用程序的一般問題。我的印象是，你有一些具體的問題，但它沒有通過。重新閱讀後，我仍然不確定「滑塊」是什麼？這對你自己可能是非常有意義的，但它不是網絡編程的核心概念（至少對我而言）。 – Kolban 2014-11-02 19:29:48

在這裏您會找到一個顯示可能的解決方案的jsFiddle。不要談論幻燈片和其他物品，讓我們思考屏幕上的圖像。我們在這裏說的是，我們只想顯示可能圖像的一個子集，而不是基於事件的所有圖像。在示例中，我們將六個圖像加載到屏幕中，但它們被分成三組（分組）。根據點擊哪個按鈕，相應的設置將變爲可見。

這只是一種可能的解決方案。其他解決方案可以動態加載圖像只有當選擇適當的設置，這將是更有效的，但是這給出了一般概念的指示。

此解決方案的代碼的代碼是：

$(function() { 
    function hideAll() { 
     $(".group img").hide(); 
    } 

    $("#set1").click(function() { 
     hideAll(); 
     $(".group .set1").show(); 
    }); 

    $("#set2").click(function() { 
     hideAll(); 
     $(".group .set2").show(); 
    }); 

    $("#set3").click(function() { 
     hideAll(); 
     $(".group .set3").show(); 
    }); 
});

其設置回調每個三個按鈕，然後使用類選擇來確定要隱藏和顯示哪個組。

來源

2014-11-03 00:29:52 Kolban

感謝您指向這個方向。我會讓你知道結果。 – 2014-11-03 08:28:18

如果圖像不是圖像滑塊的一部分，這將是一個很好的解決方案。但是，由於圖像在圖像滑塊內連續排列，因此我不得不採取其他方式解決此問題。謝謝您的幫助。 – 2014-11-06 06:10:20

三個不同的onclick事件應顯示同一滑塊的三組不同的幻燈片

回答

相關問題