jquery圆形旋转图片滚动切换效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了jquery圆形旋转图片滚动切换效果,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2413字,纯文字阅读大概需要4分钟。
内容图文
![jquery圆形旋转图片滚动切换效果](/upload/InfoBanner/zyjiaocheng/303/e952011bab224eb98075c043adbfaf52.jpg)
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 圆形旋转图片滚动切换效果相关文章请关注PHP中文网!
内容总结
以上是互联网集市为您收集整理的jquery圆形旋转图片滚动切换效果全部内容,希望文章能够帮你解决jquery圆形旋转图片滚动切换效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。