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


Posted in Javascript onJanuary 19, 2011

这个效果比较特别,可爱,所以在外面网站没怎么看到过,有兴趣的朋友可以下载后自己使用。
PS: 经过修改已经兼容大众浏览器。
效果图:
jquery 圆形旋转图片滚动切换效果
在线演示:http://demo.3water.com/js/ImagesRotateScroll/index.html
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>

打包下载 https://3water.com/jiaoben/34107.html
Javascript 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
js的hasownproperty使用示例
Mar 02 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
JavaScript实现自动切换图片代码
Oct 11 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
Javascript调用C#代码
Jan 17 #Javascript
js的写法基础分析
Jan 17 #Javascript
js 动态文字滚动的例子
Jan 17 #Javascript
JavaScript中的Array对象使用说明
Jan 17 #Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 #Javascript
对xmlHttp对象的理解
Jan 17 #Javascript
对xmlHttp对象方法和属性的理解
Jan 17 #Javascript
You might like
PHP中动态HTML的输出技术
2006/10/09 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP多态代码实例
2015/06/26 PHP
PHP中检索字符串的方法分析【strstr与substr_count方法】
2017/02/17 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
Javascript 入门基础学习
2010/03/10 Javascript
jQuery的Ajax时无响应数据的解决方法
2010/05/25 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
Node层模拟实现multipart表单的文件上传示例
2018/01/02 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
Element-ui el-tree新增和删除节点后如何刷新tree的实例
2020/08/31 Javascript
[55:44]OG vs NAVI 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
快速入手Python字符编码
2016/08/03 Python
Python制作刷网页流量工具
2017/04/23 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
应届毕业生自我鉴定范文
2013/12/27 职场文书
《雷雨》教学反思
2014/02/20 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
文案策划专业自荐信
2014/07/07 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
学术会议领导致辞
2015/07/29 职场文书