滚动图片效果 jquery实现回旋滚动效果


Posted in Javascript onJanuary 08, 2013

今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图:
滚动图片效果 jquery实现回旋滚动效果 
html 代码:

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
<meta charset="UTF-8"> 
<title>jquery-roundabout</title> 
<style type="text/css"> 
*{padding:0;margin:0;} 
body{font:24px tahoma;} 
ul{list-style:none;margin:100px auto 0;width:500px;height:200px;} 
li{line-height:200px;height:200px;width:300px;background:#ccc;text-align:center;cursor:pointer;} 
li.roundabout-in-focus{cursor:default;} 
</style> 
</head> 
<body> 
<ul class="roundabout"> 
<li>Block 1</li> 
<li>Block 2</li> 
<li>Block 3</li> 
<li>Block 4</li> 
<li>Block 5</li> 
</ul> 
</body> 
</html> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="js/jquery.roundabout.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$('.roundabout').roundabout(); 
}); 
</script>

关于 roundabout.js 的代码可以去官网上下载,这里就不写了,太长了。点击官网地址。
Javascript 相关文章推荐
JavaScript匿名函数与委托使用示例
Jul 22 Javascript
javascript实现切换td中的值
Dec 05 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
Aug 27 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
Jan 27 Javascript
理解javascript封装
Feb 23 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
基于JavaScript实现自定义滚动条
Jan 25 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
[原创]微信小程序获取网络类型的方法示例
Mar 01 Javascript
打豆豆小游戏 用javascript编写的[打豆豆]小游戏
Jan 08 #Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 #Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 #Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 #Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 #Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
You might like
phpmail类发送邮件函数代码
2012/02/20 PHP
php获取网卡的MAC地址支持WIN/LINUX系统
2014/04/30 PHP
微信公众平台之快递查询功能用法实例
2015/04/14 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
使用PHPUnit进行单元测试并生成代码覆盖率报告的方法
2019/03/08 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
javascript实用方法总结
2015/02/06 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
微信小程序倒计时功能实例代码
2018/07/17 Javascript
Vue引入Stylus知识点总结
2020/01/16 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
django表单实现下拉框的示例讲解
2018/05/29 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
python将txt等文件中的数据读为numpy数组的方法
2018/12/22 Python
Python控制键盘鼠标pynput的详细用法
2019/01/28 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
Python接收手机短信的代码整理
2020/08/02 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
不遵守课堂纪律的检讨书
2014/09/24 职场文书
pytorch查看网络参数显存占用量等操作
2021/05/12 Python
MySQL和Oracle批量插入SQL的通用写法示例
2021/11/17 MySQL
JavaScript的Set数据结构详解
2022/02/18 Javascript
Spring Bean是如何初始化的详解
2022/03/22 Java/Android