這個效果比較特別，可愛，所以在外面網站沒怎么看到過，有興趣的朋友可以下載后自己使用。

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

總結

以上是生活随笔為你收集整理的html5圆形旋转菜单js,jquery 圆形旋转图片滚动切换效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。