滚动图片效果 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 相关文章推荐
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
学习ExtJS table布局
Oct 08 Javascript
jQuery UI AutoComplete 自动完成使用小记
Aug 21 Javascript
JS获取当前日期时间并定时刷新示例
Mar 04 Javascript
jquery 实现输入邮箱时自动补全下拉提示功能
Oct 04 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
JS实现的按钮点击颜色切换功能示例
Oct 19 Javascript
Vue.set 全局操作简单示例
Sep 19 Javascript
微信小程序实现单个或多个倒计时功能
Nov 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP多个版本的分析解释
2011/07/21 PHP
PHP获取MAC地址的具体实例
2013/12/13 PHP
PHP实现的ID混淆算法类与用法示例
2018/08/10 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
js定时器的使用(实例讲解)
2014/01/06 Javascript
如何正确使用javascript 来进行我们的程序开发
2014/06/23 Javascript
使用delegate方法为一个tr标签加一个链接
2014/06/27 Javascript
javascript中bind函数的作用实例介绍
2014/09/28 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
vue生命周期实例小结
2018/08/15 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
python创建一个最简单http webserver服务器的方法
2015/05/08 Python
Python实现扩展内置类型的方法分析
2017/10/16 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
anaconda如何查看并管理python环境
2019/07/05 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
2014年自愿离婚协议书范本
2014/09/25 职场文书
承诺函范文
2015/01/21 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
CSS变量实现主题切换的方法
2021/06/23 HTML / CSS