滚动图片效果 jquery实现回旋滚动效果
更新时间：2013年01月08日 09:27:12 作者：
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 的代码可以去官网上下载，这里就不写了，太长了。点击官网地址。
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 的代码可以去官网上下载，这里就不写了，太长了。点击官网地址。
相关文章
在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括：全局变量的备份；处理字符串用的正则表达式；检测浏览器的正则表达式；对核心函数的引用备份。这里略过大部分，只说两种：全局变量和浏览器检测。2011-05-05
大家都知道dom是一种与浏览器、平台、语言无关的接口，使用dom接口可以很轻松访问页面中所有的标准组件，本篇文章主要给大家讲解jquery基础教程之dom操作，有需要的朋友可以参考下2015-08-08
这篇文章主要为大家详细介绍了jquery实现图片上传前本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
jquery 指南/入门基础...2007-11-11
proxy()主要用于在同样的上下文语境中指向另一个对象,下面我们就以实例解析jQuery中proxy()函数的用法,需要的朋友可以参考下2016-05-05
这篇文章主要介绍了jQuery实现简易商城系统项目实操，文章围绕主题展开详细的内容介绍，具有一定的参考价值，感兴趣的小伙伴可以参考一下2022-06-06
JavaScript的jQuery库中function的存在和参数问题
这篇文章主要介绍了JavaScript的jQuery库中function的存在和参数问题,包括function的参数传递和检测一个jQuery方法是否存在等,需要的朋友可以参考下2015-08-08
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
笔者在项目中使用 jquery.ui.dialog 1.7.2时，当使用$("#d").dialog("open");时，dialog总是弹出在option中指定的位置；2009-11-11
jquery UI Datepicker时间控件的使用及问题解决
这篇文章主要介绍了jquery UI Datepicker时间控件的使用及与asp.net中的UpdatePanel联合使用时的失效问题解决，感兴趣的小伙伴们可以参考一下2016-04-04
在本篇文章中我们给大家带来了Jquery和CSS实现选择框重置按钮功能的相关代码，需要的朋友们参考下。2018-11-11
最新评论