<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>jquery-roundabout</title> 

<style type="text/css">

*{margin:;padding:;list-style-type:none;}

a,img{border:;}

body{font:12px/% Arial, Helvetica, sans-serif, "新宋体";background:#ddd;}

/* roundabout */

.roundabout-holder{width:850px;height:496px;margin: auto;}

.roundabout-moveable-item{width:646px;height:416px;cursor:pointer;border:3px solid #ccc;border:3px solid rgba(, , , 0.08);border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}

.roundabout-moveable-item img{width:%;}

.roundabout-in-focus{border:3px solid rgba(, , , 0.2);}

</style> 

</head>

<body> 

    <ul class="roundabout" id="myroundabout">

        <li><img src="img/slide1.jpg"></li>

        <li><img src="img/slide2.jpg"></li>

        <li><img src="img/slide3.jpg"></li>

        <li><img src="img/slide4.jpg"></li>

        <li><img src="img/slide5.jpg"></li>

    </ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.roundabout.js"></script>

<script type="text/javascript" src="jquery.roundabout-shapes.js"> </SCRIPT>

<script type="text/javascript">

$(document).ready(function() {

    $('#myroundabout').roundabout({

        autoplay: true,//自动播放

        autoplayDuration: ,//时间

        autoplayPauseOnHover: true,//自动鼠标移上停滞

        shape: 'figure8',  //支持属性theJuggler、figure8、waterWheel、square、conveyorBeltLeft、conveyorBeltRight、goodbyeCruelWorld、diagonalRingLeft、diagonalRingRight、rollerCoaster、tearDrop、tickingClock、flurry、nowSlide、risingEssence随便换

        minOpacity:

    });

});

</script>    

</body>

</html>

jquery roundabout幻灯片插件3d图片切换支持图片旋转切换滚动的更多相关文章

  1. Jquery Slick幻灯片插件

    slick 是一个基于 jQuery 的幻灯片插件,具有以下特点: 支持响应式 浏览器支持 CSS3 时,则使用 CSS3 过度/动画 支持移动设备滑动 支持桌面浏览器鼠标拖动 支持循环 支持左右控制 ...

  2. jquery.roundabout.js实现3D图片层叠旋转木马切换

    最近项目中需要实现3D图片层叠旋转木马切换的效果,于是用到了jquery.roundabout.js. 兼容性如图: html结构代码: <div id="featured-area& ...

  3. jquery delayLoading.js插件的延迟加载效果和图片延迟加载

    1.首页给大家介绍一下这款插件的主要用途 主要应用于图片的延迟加载,而且可以变换不同的延迟加载效果,适合相册图片.有做相册的可以考虑应用. 2.兼容IE7以上都兼容,其他的浏览器也兼容.所以说兼容性还 ...

  4. jquery瀑布流布局插件,兼容ie6不支持下拉加载,用于制作分类卡

    调用方法 $('需要布局的块').sault() 如果要在图片加载后调用需要使用$(window).load(function(fx){});函数,即等待图片加载完成再调用 3个参数 1.left:左 ...

  5. 超轻型响应jQuery旋转木马幻灯片插件anoSlide

    http://www.jqcool.net/demo/201409/jquery-anoslide/

  6. jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）

    找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...

  7. jQuery幻灯片插件autoPic

    原文地址:Jquery自定义幻灯片插件 插件效果图: 演示地址:autoPic项目地址:autoPic 欢迎批评指正!

  8. 幻灯片插件FlexSlider -- Amaze UI幻灯片参数

    用了Amaze UI 的人就知道,其幻灯片插件是 data-am-slider='{}'来传参数的:(以下代码来自Amaze UI 官网) <div data-am-widget="s ...

  9. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

随机推荐

  1. python学习之字符串

    最近在学习python,随手做些记录,方便以后回顾 #字符串是不可再改变的序列aa='abcd'#aa[2:]='ff' #报错,不可直接赋值#字符串格式化:使用格式化操作符即百分号%来实现print ...

  2. 【python自动化第五篇：python入门进阶】

    今天内容: 模块的定义 导入方法 import的本质 导入优化 模块分类 模块介绍 一.模块定义: 用来在逻辑上组织python代码(变量,函数,逻辑,类):本质就是为了实现一个功能(就是以.py结尾 ...

  3. ByteBuffer使用之道

    缓冲区分配和包装  在能够读和写之前,必须有一个缓冲区,用静态方法 allocate() 来分配缓冲区:  ByteBuffer buffer = ByteBuffer.allocate(1024); ...

  4. ElasticSearch怎样加入，检索数据

    Elasticsearch是一个分布式的文档(document)存储引擎.它能够实时存储并检索复杂数据结构--序列化的JSON文档.换言说,一旦文档被存储在Elasticsearch中,它就能够在集群 ...

  5. jquery mobile图片自适应屏幕

    jquery mobile中如果不给img标签指定宽度的话,无法达到自适应屏幕的效果,特此备注:width:100%;

  6. 二分PKU3273

    <span style="color:#3333ff;">/* F - 二分 Time Limit:2000MS Memory Limit:65536KB 64bit ...

  7. QuaZip实现多文件打包

    项目需求: 在Goldenfarm客户端中当用户选择了本地场景文件,并进行本地场景文件分析后会产生分析结果,分析结果主要包括:贴图纹理.可渲染层等,其中贴图纹理指出了在场景文件中使用到的贴图或其它文件 ...

  8. 基于HBase0.98.13搭建HBase HA分布式集群

    在hadoop2.6.0分布式集群上搭建hbase ha分布式集群.搭建hadoop2.6.0分布式集群,请参考“基于hadoop2.6.0搭建5个节点的分布式集群”.下面我们开始啦 1.规划 1.主 ...

  9. (转载)关于ArrayList的5道面试题

    我以面试官的身份参加过很多Java的面试,以下是五个比较有技巧的问题,我发现有些初级到中级的Java研发人员在这些问题上没有完全弄明白,似懂非懂.所以我写了一篇相关的文章,帮助初级Java研发人员弄清 ...

  10. PHP的无限栏目分类

    自己在PHP的无线栏目分类上面就是搞了很久都没有明白,所以现在是趁着记忆力还没有完全的消退的时候速度的记录下来 这里讲解的是最简单的树形栏目,适合的是小中型的栏目分类需求 1.这里讲解的是针对是只要通 ...