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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
发一个自己用JS写的实用看图工具实现代码
Jul 26 Javascript
HTML node相关的一些资料整理
Jan 01 Javascript
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
JS对img标签进行优化使用onerror显示默认图像
Apr 24 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
vue如何从接口请求数据
Jun 22 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
vue 微信分享回调iOS和安卓回调出现错误的解决
Sep 07 Javascript
js作用域及作用域链工作引擎
Jul 07 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输入流php://input介绍
2012/09/18 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
Javascript实例教程(19) 使用HoTMetal(6)
2006/12/23 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
用nodejs实现PHP的print_r函数代码
2014/03/14 NodeJs
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
VUE页面中加载外部HTML的示例代码
2017/09/20 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
python列表的常用操作方法小结
2016/05/21 Python
Python正则表达式匹配中文用法示例
2017/01/17 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
django中related_name的用法说明
2020/05/20 Python
HTML5注册页面示例代码
2014/03/27 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
干部培训自我鉴定
2014/01/22 职场文书
《跨越百年的美丽》教学反思
2014/02/11 职场文书
《草原》教学反思
2014/02/15 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
《太阳》教学反思
2014/02/21 职场文书
英语专业职业生涯规划范文
2014/03/05 职场文书
美德少年事迹材料500字
2014/08/19 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
仓库管理制度范本
2015/08/04 职场文书
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS