Question

我试图在循环图片库上工作，到目前为止一切工作都很完美，但我想知道是否可以将传呼机缩略图转换为滑块。

我尝试使用此插件simplyscroll，但遗憾的是它无效。我不知道为什么可能因为两个插件之间存在冲突。

我只想转动拇指，如下图所示： enter image description here

Answer 1

在这种情况下，我发现更好地更改你使用的插件，所以我发现这个插件可以很容易地处理它。

https://adgallery.codeplex.com/

广告库已经在图片的底部滑动了缩略图，并且易于使用。

Answer 2

github上有一个滑块插件 link to GitHub Page 我发现这与你的滑块类似你可以在priteshgupta.com/demos/templates/vivid-photo/看到滑块的现场演示缩略图在Mousemove事件上滑动

然后我通过添加自定义功能自动滑动缩略图

来稍微修改了这个

  for (var i = 0; i < 1500; i=i+30) {
     $thumbScroller_container.animate({left:-i}, $scrollEasing,$scrollEasingType); 
   }

原来是

$thumbScroller.mousemove(function(e){
        if($thumbScroller_container.width()>sliderWidth){
            var mouseCoords=(e.pageX - $placement[1]);
            var mousePercentX=mouseCoords/sliderWidth;
            var destX=-((((totalContent+($tsMargin*2))-(sliderWidth))-sliderWidth)*(mousePercentX));
            var thePosA=mouseCoords-destX;
            var thePosB=destX-mouseCoords;
            if(mouseCoords>destX){
                $thumbScroller_container.stop().animate({left: -thePosA}, $scrollEasing,$scrollEasingType); //with easing
            } else if(mouseCoords<destX){
                $thumbScroller_container.stop().animate({left: thePosB}, $scrollEasing,$scrollEasingType); //with easing
            } else {
                $thumbScroller_container.stop();  
            }
        }
});

现在它将按照您在查询中说明的方式工作这是改变预览 link to demo 我编辑的js文件 Gallery page i edited 如果你想访问任何事件，比如点击jquery那么你可以使用触发器

循环插件：将寻呼机缩略图变为滑块

2 个答案: