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 相关文章推荐
js中的escape及unescape函数的php实现代码
Sep 04 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
jQuery实现文本框输入同步的方法
Jun 20 Javascript
jQuery中extend函数详解
Jul 13 Javascript
有关Promises异步问题详解
Nov 13 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
Oct 24 Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 Javascript
js面试题之异步问题的深入理解
Sep 20 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+javascript实现二级级联菜单的制作
2008/05/06 PHP
CodeIgniter php mvc框架 中国网站
2008/05/26 PHP
php miniBB中文乱码问题解决方法
2008/11/25 PHP
解析CI的AJAX分页 另类实现方法
2013/06/27 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
Laravel 队列使用的实现
2019/01/08 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
js日期对象兼容性的处理方法
2014/01/28 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
Javascript从数组中随机取出不同元素的两种方法
2016/09/22 Javascript
jQuery弹出层插件popShow用法示例
2017/01/23 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
轻松理解vue的双向数据绑定问题
2017/10/30 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
JS前端广告拦截实现原理解析
2020/02/17 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Python httplib模块使用实例
2015/04/11 Python
Python利用ansible分发处理任务
2015/08/04 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
基于Python爬取股票数据过程详解
2020/10/21 Python
Python使用Pygame绘制时钟
2020/11/29 Python
大学学生会竞选演讲稿
2014/04/25 职场文书
调查研究项目计划书
2014/04/29 职场文书
工程索赔意向书
2014/08/30 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
法院个人总结
2015/03/03 职场文书
交通事故赔偿起诉书
2015/05/20 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
python Tkinter模块使用方法详解
2022/04/07 Python