3

我有一组图像：

<ul>
    <li id="angle1" class="first scroll-img1-wrap" style="display:block;">
         <img src="img/scroll/img1.png">
    </li>
    <li id="angle2" class="scroll-img2-wrap">
         <img src="img/scroll/img2.png">
    </li>
    <li id="angle3" class="scroll-img3-wrap">
         <img src="img/scroll/img3.png">
    </li>
    <li id="angle4" class="scroll-img4-wrap">
         <img src="img/scroll/img4.png">
    </li>
</ul>

我有一个 jQuery 标准滑块。

我想在移动滑块时在图像之间切换：

$( ".slider" ).slider({
        animate: true,
        range: "min",
        value: 10,
        min: 10,
        max: 40,
        step: 10,

        slide: function( event, ui ) {
            $( "#slider-result" ).html( ui.value );
        },
        change: function(event, ui) {       
        }

    });

我怎样才能做到这一点？

4

4 回答 4

2

您只需要使用 jQuery 的 .show() 和 .hide() 函数，并使用标准类名（例如：scroll-img-wrap 而不是 scroll-img#-wrap）。

http://jsfiddle.net/yFnwD/

如果您有多个这些滑块，那么您可能希望在 UL 标记上使用一个类，然后使用后代选择器来查找您之后的子项。

HTML

<div class="slider"></div>
<ul>
    <li id="angle1" class="scroll-img-wrap">
         ONE
    </li>
    <li id="angle2" class="scroll-img-wrap">
         TWO
    </li>
    <li id="angle3" class="scroll-img-wrap">
         THREE
    </li>
    <li id="angle4" class="scroll-img-wrap">
         FOUR
    </li>
</ul>

JAVASCRIPT

$(".scroll-img-wrap").hide();
$(".scroll-img-wrap:first").show();
$( ".slider" ).slider({
        animate: true,
        range: "min",
        value: 0,
        min: 0,
        max: $(".scroll-img-wrap").length - 1,
        step: 1,

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

    });
于 2013-08-12T12:58:20.877 回答
0

这是您可以使用 jQuery animate 函数执行的操作的示例。您可以根据需要更改触发器。

http://jsfiddle.net/deKuf/4/

$(document).ready(function()
  {
  $("#angle1").mouseover(function(){
      $("#angle1").animate({height:"300px"});
  });
  $("#angle1").mouseleave(function(){
      $("#angle1").animate({height:"100px"});
  });
});
于 2013-08-12T12:55:07.027 回答
-1

查看他们的官方演示（滑块滚动条）：http: //jqueryui.com/slider/#side-scroll 这将回答您的问题，您必须在滚动时使用 CSS 属性。

于 2013-08-12T12:52:03.610 回答
-1

这可能是解决方案（未经测试）：

<ul>
  <li id="angle1" class="first scroll-img1-wrap" style="display:block;">
     <img src="img/scroll/img1.png">
  </li>
  <li id="angle2" class="scroll-img2-wrap">
     <img src="img/scroll/img2.png">
  </li>
  <li id="angle3" class="scroll-img3-wrap">
     <img src="img/scroll/img3.png">
  </li>
  <li id="angle4" class="scroll-img4-wrap">
     <img src="img/scroll/img4.png">
  </li>

和 javascript 可能是：

$( ".slider" ).slider({
    animate: true,
    range: "min",
    value: 10,
    min: 10,
    max: 40,
    step: 10,

    slide: function( event, ui ) {
        // get slider value and concatenates with image number and path
        // for case of zero change to 1, as your image starting from 1
        $("#mainImage").attr("src","img/scroll/img" + ui.value + ".png" );
    },
    change: function(event, ui) {       
    }

});

我希望它有帮助。

于 2013-08-12T12:58:33.953 回答