Jquery circular rotating image scrolling Switching Effect

This article introduces the rotation effect of a circle. Based on the physical characteristics of the circle, any point on the circle can be used as a control button, and then drag it to rotate the image. This effect is very special and cute, so I have never seen it on any external website. If you are interested, you can download it and use it on your own.
PS: it has been modified to be compatible with the public browser.
:

Step 1. Create HTML

Step 2. Create CSS

#rotatescroll { width: 300px; height: 300px; margin: 0 auto; position: relative; } #rotatescroll .viewport{ width: 300px; height: 300px; position: relative; margin: 0 auto; overflow: hidden; } #rotatescroll .overview { width: 798px; position: absolute; list-style: none; margin: 0; padding: 0; left: 0; top: 0; } #rotatescroll .overview li { width: 300px; height: 300px; float: left; position: relative; } #rotatescroll .overlay { height: 300px; width: 300px; background: url(../images/bg-rotatescroll.png) no-repeat 0 0; position: absolute; left: 0; top: 0; } #rotatescroll .thumb { width: 26px; height: 26px; z-index: 200; background: url(../images/bg-thumb.png) no-repeat 50% 50%; position: absolute; top: 0px; cursor: pointer; left: 0px; } #rotatescroll .dot { background: url(../images/bg-dot2.png) no-repeat 0 0; display: none; height: 12px; width: 12px; position: absolute; left: 155px; top: 3px; z-index: 100; } #rotatescroll .dot span { display: none; }

Step3. insert jQuery and script packages