手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >滚动图片效果 jquery实现回旋滚动效果
滚动图片效果 jquery实现回旋滚动效果
摘要:今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图:html代码:复制代码代码如下:jquery-roundabout*{pa...

今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图:

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

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>

<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实现回旋滚动效果】相关文章:

jQuery实现首页图片淡入淡出效果的方法

jQuery预加载图片常用方法

纯javascript实现四方向文本无缝滚动效果

jQuery实现转动随机数抽奖效果的方法

JavaScript实现列表分页功能特效

jQuery实现在列表的首行添加数据

jQuery实现返回顶部效果的方法

JQuery分屏指示器图片轮换效果实例

jQuery插件jRumble实现网页元素抖动

JavaScript模版引擎的基本实现方法浅析

精品推荐
分类导航