滚动图片效果jquery实现回旋滚动效果
jQuery 实现 图片 效果 滚动
2023-06-13 09:14:43 时间
今天在网上找到一款回旋滚动效果,拿出来和大家一起分享。先上效果图:
html代码:
复制代码代码如下:
html代码:
<!DOCTYPEHTML>
<htmllang="en-US">
<head>
<metacharset="UTF-8">
<title>jquery-roundabout</title>
<styletype="text/css">
*{padding:0;margin:0;}
body{font:24pxtahoma;}
ul{list-style:none;margin:100pxauto0;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>
<ulclass="roundabout">
<li>Block1</li>
<li>Block2</li>
<li>Block3</li>
<li>Block4</li>
<li>Block5</li>
</ul>
</body>
</html>
<scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<scripttype="text/javascript"src="js/jquery.roundabout.min.js"></script>
<scripttype="text/javascript">
$(function(){
$(".roundabout").roundabout();
});
</script>
关于roundabout.js的代码可以去官网上下载,这里就不写了,太长了。点击官网地址。
相关文章
- 利用Jquery Lazyload JS插件实现网页图片延迟加载
- jquery以及js实现option左移右移详解编程语言
- 使用jQuery同时控制四张图片的伸缩实现代码
- jQuery使用一个按钮控制图片的伸缩实现思路
- Jquery实现三层遍历删除功能代码
- jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
- jquery图片放大功能简单实现
- jquery中加载图片自适应大小主要实现代码
- Jquery实现图片放大镜效果的思路及代码(自写)
- jQuery获取和设置select下拉框的值实现代码
- jQuery实现可收缩展开的级联菜单实例代码
- jquery简单实现鼠标经过导航条改变背景图
- jQuery动态改变图片显示大小(修改版)的实现思路及代码
- JQuery实现鼠标移动到图片上显示边框效果
- 用jquery等比例控制图片宽高的具体实现
- jquery实现在页面加载完毕后获取图片高度或宽度
- jQuery实现隔行背景色变色
- jquery实现动态画圆
- 完美兼容各大浏览器的jQuery插件实现图片切换特效
- jQuery实现ichat在线客服插件
- jQuery实现友好的轮播图片特效
- Jquery实现table样式的设定
- jquery实现类似淘宝星星评分功能实例