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 ready函数源代码研究
Dec 06 Javascript
使用JQuery库提供的扩展功能实现自定义方法
Sep 09 Javascript
js获取json元素数量的方法
Jan 27 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
微信小程序自定义带价格显示日历效果
Dec 29 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
Vue axios 跨域请求无法带上cookie的解决
Sep 08 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
Nov 03 Javascript
Vue实现省市区三级联动
Dec 27 Vue.js
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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
关于PHP中Object对象的笔记分享
2011/06/28 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
JS 实现图片直接下载示例代码
2013/07/22 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
jquery操作复选框checkbox的方法汇总
2015/02/05 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
2018/03/25 jQuery
JS闭包经典实例详解
2018/12/20 Javascript
简单了解JavaScript sort方法
2019/11/25 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
Python yield 小结和实例
2014/04/25 Python
python之PyMongo使用总结
2017/05/26 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python conda操作方法
2019/09/11 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
TensorFlow实现指数衰减学习率的方法
2020/02/05 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
详细分析Python collections工具库
2020/07/16 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
应届毕业生个人求职信范文
2014/01/29 职场文书
剪枝的学问教学反思
2014/02/07 职场文书
开学典礼演讲稿
2014/05/23 职场文书
环保宣传标语
2014/06/12 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
2015年司机工作总结
2015/04/23 职场文书
开票证明
2015/06/23 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
教你怎么用Python监控愉客行车程
2021/04/29 Python