html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果

这个效果比较特别，可爱，所以在外面网站没怎么看到过，有兴趣的朋友可以下载后自己使用。

PS: 经过修改已经兼容大众浏览器。

效果图:

在线演示：http://demo.jb51.net/js/ImagesRotateScroll/index.html

Step1. 创建HTML

• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 
• 

Step2. 创建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. 插入jQuery和脚本包

打包下载 //www.jb51.net/jiaoben/34107.html