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 相关文章推荐
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
js使用函数绑定技术改变事件处理程序的作用域
Dec 26 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
jquery easyui使用心得
Jul 07 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
Aug 08 Javascript
解决Layui 表格自适应高度的问题
Nov 15 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
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
优化php效率,提高php性能的一些方法
2011/03/24 PHP
3种方法轻松处理php开发中emoji表情的问题
2016/07/18 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
JS效率个人经验谈(8-15更新),加入range技巧
2007/01/09 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
Javascript 判断客户端浏览器类型代码
2010/03/01 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
jquery中的mouseleave和mouseout的区别 模仿下拉框效果
2012/02/07 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
2015/09/16 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
深入理解vue中的$set
2017/06/01 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
angular第三方包开发整理(小结)
2018/04/19 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
微信小程序吸底区域适配iPhoneX的实现
2020/04/09 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
OpenCV-Python实现轮廓检测实例分析
2018/01/05 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
python django框架中使用FastDFS分布式文件系统的安装方法
2019/06/10 Python
python利用7z批量解压rar的实现
2019/08/07 Python
Django 拼接两个queryset 或是两个不可以相加的对象实例
2020/03/28 Python
鱼油专家:Omegavia
2016/10/10 全球购物
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
Helly Hansen工作服美国官方网上商店:为最恶劣的环境
2019/09/04 全球购物
团工委书记自荐书范文
2013/12/17 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
党员应该树立反腐倡廉的坚定意识思想汇报
2014/09/12 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
精神文明建设先进个人事迹材料
2014/12/24 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js