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

Switch between images as I move the Slider

本文关键字：之间 图像 移动      更新时间：2023-09-26

我有一组图像：

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

我怎样才能做到这一点？

您只需要使用jQuery的.show（）和.hide（）函数，并使用标准类名（例如：滚动img换行而不是滚动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) {       
        }
    });

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

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

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

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

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

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

我希望它能有所帮助。

相关文章：