Question

我有一组图片：

<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) {       
        }

    });

我怎样才能做到这一点？

Answer 1

您只需使用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) {       
        }

    });

Answer 2

以下是使用jQuery动画功能可以执行的操作示例。您可以根据需要更改触发器。

<强> http://jsfiddle.net/deKuf/4/

$(document).ready(function()
  {
  $("#angle1").mouseover(function(){
      $("#angle1").animate({height:"300px"});
  });
  $("#angle1").mouseleave(function(){
      $("#angle1").animate({height:"100px"});
  });
});

Answer 3

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

Answer 4

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

<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) {       
    }

});

我希望它有所帮助。

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

4 个答案: