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 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
Jquery遍历节点的方法小集
Jan 22 Javascript
解决jquery版本冲突的有效方法
Sep 02 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
浅谈js中的延迟执行和定时执行
May 31 Javascript
Bootstrap Modal遮罩弹出层代码分享
Nov 21 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
JS实现九宫格拼图游戏
Jun 28 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
php 用checkbox一次性删除多条记录的方法
2010/02/23 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php中有关合并某一字段键值相同的数组合并的改进
2015/03/10 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
phpstudy2018升级MySQL5.5为5.7教程(图文)
2018/10/24 PHP
PHP单元测试框架PHPUnit用法详解
2019/01/23 PHP
一个简单的JavaScript数据缓存系统实现代码
2010/10/24 Javascript
js列举css中所有图标的实现代码
2011/07/04 Javascript
javascript通过className来获取元素的简单示例代码
2014/01/10 Javascript
javascript去除字符串中所有标点符号和提取纯文本的正则
2014/06/07 Javascript
使用vue.js开发时一些注意事项
2016/04/27 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
JS实现合并json对象的方法
2017/10/10 Javascript
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
pandas如何处理缺失值
2019/07/31 Python
python实现把二维列表变为一维列表的方法分析
2019/10/08 Python
python属于软件吗
2020/06/18 Python
Python实现上下文管理器的方法
2020/08/07 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
搬家公司的创业计划书
2014/01/01 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
七年级地理教学反思
2014/01/26 职场文书
物业经理自我鉴定
2014/03/03 职场文书
教师节活动主持词
2014/04/02 职场文书
学习雷锋演讲稿
2014/05/10 职场文书
企业承诺书格式
2014/05/21 职场文书
多媒体教室标语
2014/06/26 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
大学开学感言
2015/08/01 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
go使用Gin框架利用阿里云实现短信验证码功能
2021/08/04 Golang