如何使用不同的div相同的滑块（jQuery中结合三个独立的功能，一个功能）

问题描述：

我有一个网站，我展示3“吸引”。在每个绘图中都有全屏显示的图片。借助一个功能，您可以在绘图之间切换。在每个绘图中，您可以移动滑块（uislider）以显示较旧的图片。目前我具有相同的功能的3倍（当然与不同类的）和3倍的滑块（在每个绘图）。它可以工作，但我想将它们结合到一个功能和一个滑块，通过所示绘制的图片浏览我。如果您更改绘图并返回，滑块应保持该位置。如何使用不同的div相同的滑块（jQuery中结合三个独立的功能，一个功能）

这里是我的代码：

HTML：

<div class="drawSelect3"> 

     <div class="draw3"> 
       <img src="Bilder/03/03_01.03.16.jpg"/> 
       <img src="Bilder/03/03_01.02.16.jpg"/> 
       <img src="Bilder/03/03_01.01.16.jpg"/>  
     </div> 

     <div class="TimeS"> 
       <div class="slider3"></div> 
     </div> 

    </div> 


    <div class="drawSelect2"> 

     <div class="draw2"> 
       <img src="Bilder/02/02_01.03.16.jpg"/> 
       <img src="Bilder/02/02_01.02.16.jpg"/> 
       <img src="Bilder/02/02_01.01.16.jpg"/> 
     </div> 

     <div class="TimeS"> 
       <div class="slider2"></div> 
     </div> 

    </div> 


    <div class="drawSelect1"> 

     <div class="draw1"> 
       <img src="Bilder/01/01_01.03.16.jpg"/> 
       <img src="Bilder/01/01_01.02.16.jpg"/> 
       <img src="Bilder/01/01_01.01.16.jpg"/> 

     </div> 

     <div class="TimeS"> 
       <div class="slider slider1"></div> 
     </div> 

    </div>

JQUERY：

$(".draw1 img").hide(); 
$(".draw1 img:first").show(); 
$(".slider1").slider({ 
     animate: "slow", 
     ondragstart: true, 
     isRTL: true, 
     value: 0, 

     min: 0, 
     max: $(".draw1 img").length - 1, 
     step: 1, 

     slide: function(event, ui) { 
      $(".draw1 img").hide(); 
      $(".draw1 img:eq("+ui.value+")").show(); 
     } 
    }); 


$(".draw2 img").hide(); 
$(".draw2 img:first").show(); 
$(".slider2").slider({ 
     animate: true, 
     ondragstart: true, 
     isRTL: true, 
     value: 0, 

     min: 0, 
     max: $(".draw2 img").length - 1, 
     step: 1, 

     slide: function(event, ui) { 
      $(".draw2 img").hide(); 
      $(".draw2 img:eq("+ui.value+")").show(); 
     } 
    }); 

$(".draw3 img").hide(); 
$(".draw3 img:first").show(); 
$(".slider3").slider({ 
     animate: true, 
     ondragstart: true, 
     isRTL: true, 
     value: 0, 

     min: 0, 
     max: $(".draw3 img").length - 1, 
     step: 1, 

     slide: function(event, ui) { 
      $(".draw3 img").hide(); 
      $(".draw3 img:eq("+ui.value+")").show(); 
     }, 
     change: function(event, ui) {  
     } 
    });

非常感谢您的帮助！

答

您可以创建一个函数，它有两个参数，绘制DIV，那么相应的滑块股利。

draw(".draw1", ".slider1"); 
draw(".draw2", ".slider2"); 
draw(".draw3", ".slider3"); 

function draw(drawdiv, sliderdiv) { 
    $(drawdiv + " img").hide(); 
    $(drawdiv + " img:first").show(); 
    $(sliderdiv).slider({ 
     animate: true, 
     ondragstart: true, 
     isRTL: true, 
     value: 0, 

     min: 0, 
     max: $(drawdiv + " img").length - 1, 
     step: 1, 

     slide: function(event, ui) { 
      $(drawdiv + " img").hide(); 
      $(drawdiv + " img:eq("+ui.value+")").show(); 
     }, 
     change: function(event, ui) {} 
    }); 
}

例子写在这里：
http://codepen.io/EskoCruz/pen/ENBxVw/

如何使用不同的div相同的滑块（jQuery中结合三个独立的功能，一个功能）

相关推荐