This effect is quite special and cute, so I haven’t seen it on many 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:
Step1. Create 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. Create 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. Insert jQuery and script package
<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>
For more jquery circular rotating image scrolling switching effect related articles, please pay attention to the PHP Chinese website!