Jquery round rotating image rolling switching effect _ jquery

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.
:

Online Demo: http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step 1. Create HTML

The Code is as follows:

Step 2. Create CSS

The Code is as follows:

# 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

The Code is as follows: