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

赞 (0)

相关推荐

  • javascript实现焦点滚动图效果 具体方法

    javascript实现焦点滚动图效果 具体方法

    前台代码: 复制代码 代码如下: <div class="sub_box">                         <div id="p-select" class="sub_nav">                             <div class="sub_no" id="bd1lfsj">                           

  • jQuery图片滚动图片的效果(另类实现)

    需求 : 图片切换的时候下一屏不允许出现空白的项,换句话说就是 : 1.当移动的最后一屏移动的个数小于要展示的个数的时候 ,只移动(展示个数-最后一屏的个数的)差值. 举个例子: 每一屏都要展示7个,但总个数才10个,滚动到下一屏时候用户看到的还是7个,这个时候需要移动的是三个 这个效果是基于jQuery写的,只是想纪念下自己的学习 话不多说了,贴代码 复制代码 代码如下: (function( $ ){     var slider = function( elem , args ){    

  • js 实用的无间断滚动图效果(良好兼容性)

    js 实用的无间断滚动图效果(良好兼容性)

    下面介绍一个方法:基本上实现结构跟行为相分离,两者的联系只需要一个 id就可以,使用起来很方便,而且同一个js代码可以实现在本页面多个滚动图效果,之间互不干扰, 1.xhtml 复制代码 代码如下: <div class="demo" id="demo1"> <table cellpadding="0" cellspacing="0"> <tr> <td><ul> &

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

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

    今天在网上找到一款回旋滚动效果,拿出来和大家一起分享.先上效果图:  html 代码: 复制代码 代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css"> *{pad

  • 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实现的回旋滚动效果完整实例【附demo源码下载】

    jquery实现的回旋滚动效果完整实例【附demo源码下载】

    本文实例讲述了jquery实现的回旋滚动效果.分享给大家供大家参考,具体如下: 这里分享一款回旋滚动效果,先上效果图: 具体代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>jquery-roundabout</title> <style type="text/css&qu

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

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

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

  • jQuery向下滚动即时加载内容实现的瀑布流效果

    下拉滚动条或鼠标滚轮滚动到页面底部时, 动态即时加载新内容. 后台用 json 传输数据, 示例程序中只写了示例数组.数据也只设置了两个属性, 需根据实际应用改写. 页面用了 ul li 做为容器, 每个 li 表示一列 <ul id="stage"> <li></li> <li></li> <li></li> PHP和Jquery和ajax实现下拉淡出瀑布流效果(无需插件) <li><

  • jQuery实现带滚动线条导航效果的方法

    本文实例讲述了jQuery实现带滚动线条导航效果的方法.分享给大家供大家参考.具体分析如下: 最早见到这种导航是在魅族的官网,当时(去年)觉得挺不错的但自己不会JavaScript,因此那时"可望而不可及".今日去手机QQ for Android官网,又发现类似这样的导航,反正自己也没啥事,所以就尝试用jQuery做出这样的效果. 效果如下: 首页 说说 日志 相册     CSS: body,ul,li{margin:0;padding:0;} #testnav{;height:80

  • jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】

    本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE

  • javascript实现图片左右滚动效果【可自动滚动，有左右按钮】

    本文实例讲述了javascript实现图片左右滚动效果.分享给大家供大家参考,具体如下: html代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <

  • jQuery实现平滑滚动的标签分栏切换效果

    jQuery实现平滑滚动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

  • jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

    jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果

    本文实例讲述了jquery实现动画菜单的左右滚动.渐变及图形背景滚动等效果.分享给大家供大家参考.具体如下: 这里演示基于jquery实现的动画菜单,内含四种效果的网站菜单,第一种是不带效果的传统导航菜单,第二种是带有图形滚动背景的菜单,第三种是由右向左背景滚动的菜单,第四种则是背景色渐变的网站菜单,每一种都很精彩,喜欢Js菜单的可模仿借鉴一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-cha-men

随机推荐