jquery circular rotating image scrolling switching effect_jquery

This effect is quite special and cute, so I haven’t seen it much on external websites. Friends who are interested can download it and use it themselves.
PS: It has been modified to be compatible with popular browsers.
Rendering:

Online demo: http://demo.jb51.net/js/ImagesRotateScroll/index.html
Step1. Create HTML

Copy code The code is as follows:

• 


• 


• 
  
• 


• 


• 


• < ;/li>
  
• 


• 


• 
> ;

• 


• 


• 


• 


• 

Step2. Create CSS

Copy code 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 package

Copy code The code is as follows:

Package downloadhttp://www.jb51.net/jiaoben/34107.html