循环插件:将PAGER缩略图转换为滑块
题
我正试图在一个循环图像库上工作,到目前为止一切正常工作,但我想知道是否有可能将寻呼机缩略图变成滑块。
我尝试这个插件 simpleyscroll 并且不幸的是它不起作用。我不知道为什么可能因为两个插件之间存在冲突。
我只是想把拇指变成如下图片:
解决方案
在这种情况下,我发现更改所用的插件更好,所以我发现这个插件可以容易地处理。
https://adgallery.codeplex.com/
广告库已经在图像的底部滑动缩略图,易于使用。
其他提示
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的事件,则可以使用触发器(
不隶属于 StackOverflow