滚动图片效果 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 相关文章推荐
ExtJs之带图片的下拉列表框插件
Mar 04 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
setinterval()与clearInterval()JS函数的调用方法
Jan 21 Javascript
jQuery中$.each使用详解
Jan 29 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 Javascript
利用JS轻松实现获取表单数据
Dec 06 Javascript
JavaScript编写九九乘法表(两种任选)
Feb 04 Javascript
解析Vue 2.5的Diff算法
Nov 28 Javascript
在Vue中使用Compass的方法
Mar 02 Javascript
微信小程序实现通过双向滑动缩放图片大小的方法
Dec 30 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下实现伪 url 的超简单方法[转]
2007/09/24 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
30个php操作redis常用方法代码例子
2014/07/05 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
php代码架构的八点注意事项
2016/01/25 PHP
[原创]网络复制内容时常用的正则+editplus
2006/11/30 Javascript
javascript call和apply方法
2008/11/24 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
javascript中不等于的代码是什么怎么写
2013/12/29 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js中常用的Math方法总结
2017/01/12 Javascript
基于ES6作用域和解构赋值详解
2017/11/03 Javascript
详解vue项目打包后通过百度的BAE发布到网上的流程
2018/03/05 Javascript
JavaScript剩余操作符Rest Operator详解
2019/07/20 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
[00:27]DOTA2战队VP、Secret贺新春
2018/02/11 DOTA
pyqt4教程之实现半透明的天气预报界面示例
2014/03/02 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python网络编程详解
2017/10/31 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
简洁自适应404页面HTML好看的404源码
2020/12/16 HTML / CSS
特教教师先进事迹
2014/05/21 职场文书
慰问信范文
2015/02/14 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
新郎接新娘保证书
2015/05/08 职场文书