Jquery图像旋转滑块手柄 [英] Jquery image rotate with slider handle

问题描述

嗨我有一个圆形的圆形滑块，其中可以添加多个图像，但我添加了一个图像，我想在有人移动滑块时旋转图像这里是参考

滑块演示



Slider Jquery文件

Tiny Circle Slider





我想当有人拖动带有pic电影手柄滑块的滑块时，它应该根据滑块手柄旋转。

Hi I have a round circle slider in which there can be multiple images can be added, but I have added one image and I want to rotate the image when someone move the slider here is the reference
Slider Demo

Slider Jquery File
Tiny Circle Slider


I want when someone drag the slider with handle slider of pic movie left it should rotate according to slider handle.

<script type="text/javascript">
    jQuery(document).ready(function($)
    {
        $('#rotatescroll').tinycircleslider();
    });
</script>

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px; pointer-events: none }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/scrollbg4.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/thumb2.png) no-repeat 50% 50%; touch-action: none; -ms-touch-action: none; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }

#rotatescroll .dot span { display: none; }

我尝试过：



我试图改变Javascript代码上的Left元素并放置转换程度但它不起作用我更像是一个PHP开发人员而不是Jquery请帮助我们。

What I have tried:

I tried to change the Left element on Javascript code and put transform degree but its not working I am more of a PHP developer not Jquery kindly help me out guys.

推荐答案

）
{

（' ＃rotatecroll'）。tinycircleslider（）;
}）;
< / script>

('#rotatescroll').tinycircleslider(); }); </script>

#rotatescroll { height:300px; position:relative; width:300px; }
#rotatescroll .viewport{ height:300px; position: relative; margin:0 auto; overflow:hidden; width:300px; pointer-events: none }
#rotatescroll .overview { position: absolute; width: 798px; list-style: none; margin: 0; padding: 0;  left: 0; top: 0; }
#rotatescroll .overview li { height:300px; width:300px; float: left; position: relative; }
#rotatescroll .overlay {background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/scrollbg4.png) no-repeat 0 0; pointer-events: none; position: absolute; left: 0; top: 0; height:300px; width:300px; }
#rotatescroll .thumb { background:url(http://www.impacticondemos.website/westpoint/wp-content/uploads/2016/11/thumb2.png) no-repeat 50% 50%; touch-action: none; -ms-touch-action: none; position: absolute; top: -3px; cursor: pointer; left: 137px; width: 100px; z-index: 200;  height: 100px; }

#rotatescroll .dot span { display: none; }

我尝试过：



我试图更改Javascript代码上的Left元素并放置转换程度但它不起作用我更像是一个PHP开发人员而不是Jquery帮助我帮助我。

What I have tried:

I tried to change the Left element on Javascript code and put transform degree but its not working I am more of a PHP developer not Jquery kindly help me out guys.

这篇关于Jquery图像旋转滑块手柄的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！