Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 滚动图片效果 jquery实现回旋滚动效果

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

发布时间:2013-10-24   编辑:www.jquerycn.cn
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 的代码可以去官网上下载,这里就不写了,太长了。点击官网地址。

您可能感兴趣的文章:
Js 图片滚动的实现方法
jquery滚动条插件
JS滚轮事件onmousewheel的用法
jQuery 列表自动循环滚动鼠标悬停时停止滚动的实现代码(图文)
jquery 滚动加载图片效果的实现代码
jquery图片滚动(渐隐渐现模糊消失效果)
jQuery实现单行文字间歇向上滚动源代码
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
jquery 文字上下滚动的小例子
文件编码导致jquery失效的解决方法

关键词: 滚动图片  回旋滚动   
[关闭]