滚动图片效果 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与CSS复习(《精通javascript》)
Jun 29 Javascript
JavaScript 数组详解
Oct 10 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Vue自定义事件(详解)
Aug 19 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
javascript实现日历效果
Jun 17 Javascript
node后端服务保活的实现
Nov 10 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 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
PHP文件下载类
2006/12/06 PHP
php 获取百度的热词数据的代码
2012/02/18 PHP
yii2.0实现创建简单widgets示例
2016/07/18 PHP
JavaScript高级程序设计
2006/12/29 Javascript
javascript 网页跳转的方法
2008/12/24 Javascript
jQuery中创建实例与原型继承揭秘
2011/12/21 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
举例讲解Node.js中的Writable对象
2015/07/29 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
Node.js创建Web、TCP服务器
2017/12/05 Javascript
create-react-app安装出错问题解决方法
2018/09/04 Javascript
vue2.0$nextTick监听数据渲染完成之后的回调函数方法
2018/09/11 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
python控制台英汉汉英电子词典
2020/04/23 Python
python写日志封装类实例
2015/06/28 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python使用re模块实现信息筛选的方法
2018/04/29 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
Python秒算24点实现及原理详解
2019/07/29 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
Linux文件系统类型
2012/09/16 面试题
期末考试动员演讲稿
2014/01/10 职场文书
毕业生自荐书
2014/02/02 职场文书
给老师的一封建议书
2014/03/13 职场文书
村庄绿化方案
2014/05/07 职场文书
骨干教师考核方案
2014/05/09 职场文书
学校运动会广播稿
2014/10/11 职场文书
街道务虚会发言材料
2014/10/20 职场文书
社区工作者个人总结
2015/02/28 职场文书
2015教师年度考核评语
2015/03/25 职场文书