循环插件：将PAGER缩略图转换为滑块

Question

我正试图在一个循环图像库上工作，到目前为止一切正常工作，但我想知道是否有可能将寻呼机缩略图变成滑块。

我尝试这个插件 simpleyscroll 并且不幸的是它不起作用。我不知道为什么可能因为两个插件之间存在冲突。

我只是想把拇指变成如下图片：

Answer 1

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

https://adgallery.codeplex.com/

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

Answer 2

github上有一个滑块插件 链接到github页面 我发现这个类似于你的滑块 并且您可以看到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();  
            }
        }
});

.

现在它将正如您在查询中所述的工作 这是更改的预览 链接到demo 我编辑的js文件 图库照片我编辑了 如果要访问任何像单击jQuery的事件，则可以使用触发器（