这个效果比较特别，可爱，所以在外面网站没怎么看到过，有兴趣的朋友可以下载后自己使用。
ps: 经过修改已经兼容大众浏览器。
效果图:
step1. 创建html
<div id="rotatescroll">
<div class="viewport">
<ul class="overview">
<li><img src="images/sf1.jpg" alt="chun-li" /></li>
<li><img src="images/sf2.jpg" alt="vega" /></li>
<li><img src="images/sf3.jpg" alt="dhaisim" /></li>
<li><img src="images/sf4.jpg" alt="ken" /></li>
<li><img src="images/sf5.jpg" alt="balrog" /></li>
<li><img src="images/sf6.jpg" alt="cammy" /></li>
<li><img src="images/sf7.jpg" alt="gouki" /></li>
<li><img src="images/sf8.jpg" alt="blanka" /></li>
<li><img src="images/sf9.jpg" alt="honda" /></li>
<li><img src="images/sf10.jpg" alt="fei long" /></li>
<li><img src="images/sf11.jpg" alt="guile" /></li>
<li><img src="images/sf12.jpg" alt="ryu" /></li>
<li><img src="images/sf13.jpg" alt="sagat" /></li>
<li><img src="images/sf14.jpg" alt="thwak" /></li>
<li><img src="images/sf15.jpg" alt="zangief" /></li>
</ul>
</div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
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和脚本包
<script type="text/javascript" src="http://www.baijs.nl/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycircleslider.js"></script>
<script type="text/javascript" src="js/website.js"></script>
更多jquery 圆形旋转图片滚动切换效果。