滚动图片效果 jquery实现回旋滚动效果_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 的代码可以去官网上下载,这里就不写了,太长了。点击官网地址。

时间: 2024-10-05 14:02:11

滚动图片效果 jquery实现回旋滚动效果_jquery的相关文章

内容滑动切换效果jquery.hwSlide.js插件封装_jquery

经过前两部分的讲解,我们大概知道内容滑动切换的基本开发思路和技巧,现在我们在第三部分将前面两部分的代码进行优化,封装成一个jQuery插件:jquery.hwSlide.js.开发者可以轻松创建各种图片轮播效果.焦点图效果.图文混排滑动效果. 下载源码 hwSlider具有以下特性: 多个参数定制,满足不同项目需求. 支持移动端触控滑动. 支持图文混排,支持各种html元素. 响应式自适应屏幕尺寸. 同一页面支持多个滑动切换. 轻量级的,压缩版不到4KB. 支持所有现代浏览器,支持

jQuery实现带滚动导航效果的全屏滚动相册实例_jquery

本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')

jQuery实现简单滚动动画效果_jquery

动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html> 先添加两个<a>元素作为按钮.然后对<a>元素进行补充: <html> <bo

jquery+php实现滚动的数字特效_jquery

有时我们需要动态的展示访问次数.下载次数等效果,我们可以借助jQuery结合后台php实现一个滚动的数字展示效果. 本文以实时获取某产品的下载次数为场景,前台定时执行javascript获取最新的下载次数,并滚动更新页面上的下载次数.HTML 我们首先载入jQuery库文件和动画背景插件:animateBackground-plugin.js. <script type="text/javascript" src="js/jquery.js"></

jQuery实现自动滚动到页面顶端的方法_jquery

本文实例讲述了jQuery实现自动滚动到页面顶端的方法.分享给大家供大家参考.具体实现方法如下: $(".scroll").click(function(event) { //prevent the default action for the click event event.preventDefault(); //get the full url - like mysitecom/index.htm#home var full_url = this.href; //split t

jQuery实现拖拽效果插件的方法_jquery

本文实例讲述了jQuery实现拖拽效果插件的方法.分享给大家供大家参考.具体如下: 下面的jQuery插件允许你通过鼠标右键点击拖动overflow的元素,这个插件可以在移动设备上运行 /** * jQuery Drag and Scroll * * Copyright (c) 2012 Ryan Naddy (ryannaddy.com) * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/li

JQuery页面图片切换和新闻列表滚动效果的具体实现_jquery

最近用到一个页面上图片左右切换和新闻列表滚动呈现的效果,整理如下: 前段代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"&g

jQuery实现鼠标滚动图片延迟加载效果附源码下载_jquery

这里延迟加载的意思是,拖动滚动条时,在图片出现在浏览器显示区域后才加载显示.在这之前全部图片都由一张图片代替.节省流量,减轻服务器负担. 请用鼠标或者键盘方向键使页面向下滚动,注意图片的变化.本特效没有使用专门的图片延迟加载插件,只需要一小段jQuery代码就实现了图片延迟加载,使用非常方便.在本文后面附有源码下载. 效果展示       源码下载 用到的加载中的图片: 代码如下: <!DOCTYPE html> <html> <head> <meta chars

jquery 左右滚动图片幻灯切换效果

先看效果图片如下 代码如下,如果要下载jquery文件可以到 jquery官方下载.  代码如下 复制代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&quo