jquery 圆形旋转图片滚动切换效果

这个效果比较特别，可爱，所以在外面网站没怎么看到过，有兴趣的朋友可以下载后自己使用。 PS: 经过修改已经兼容大众浏览器。效果图:在线演示：http://demo.jb51.net/js/ImagesRotateScroll/index.htmlStep1. 创建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> 打包下载 http://www.jb51.net/jiaoben/34107.html

于是乎,自己动手写了个!!看到很多人都是用正则,咱不会,就用了最土的方法来实现了!帖上代码吧!希望对大家有所帮助!!! 复制代码代码如下: String.prototype.trimStart = function(trimStr){ if(!trimStr){return th>>>详细阅读

本文标题：jquery 圆形旋转图片滚动切换效果

地址：http://www.17bianji.com/kaifa2/JS/25009.html

1/2 1