<div class="carousel1" id="carousel1" >
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
<a href="#"><img class="cloudcarousel" src="data:images/p1.png" /></a>
</div>  
   
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#carousel1").CloudCarousel(
{
reflHeight:,
reflOpacity: 0.5,
reflGap: ,
yRadius:,
xPos: ,
yPos: ,
autoRotate: 'right',
speed:0.2 }
);
}); </script>

效果:

reflHeight:0, //倒影的高度,单位是像素

reflOpacity:0.5, //倒影透明度(0-1)
reflGap:0, //图片与倒影之间的间隙,单位是像素
minScale:0.5, //缩放比例
xPos:0, //X轴偏移,一般设置成外框的一半,也就是实例中“#carousel1”的宽度的一半
yPos:0, //Y轴偏移,这个可以自己调试看看,很直观的
xRadius:0, //旋转幅度的水平半径,这个是猜的
yRadius:0, //旋转幅度的垂直半径,这个是猜的,因为旋转的路径是个椭圆,你明白的
altBox:null, //显示图片alt属性的样式名称
titleBox:null, //显示图片title属性的样式名称
FPS: 30, //我猜是旋转运动的步长
autoRotate: ‘no’, //是否自动播放,设置“left”或者“right”即可自动播放
autoRotateDelay: 1500, //播放延时
speed:0.2, //播放速度(0.1 ~ 0.3之间)
mouseWheel: false, //是否支持滑轮,需要加在jQuery滑轮插件,官方的地址不见了,可以用百度“jquery.mousewheel”即可
bringToFront: false, //这个参数设置为true,就是表示点击相应的图片,滚动到当前展示,一般是不打开自动播放时
buttonLeft: ”, //控制向左的按钮
buttonRight: ” //控制向右的按钮
 
//////////////////////////////////////////////////////////////////////////////////
// CloudCarousel V1.0.5
// (c) 2011 by R Cecco. <http://www.professorcloud.com>
// MIT License
//
// Reflection code based on plugin by Christophe Beyls <http://www.digitalia.be>
//
// Please retain this copyright header in all versions of the software
////////////////////////////////////////////////////////////////////////////////// (function ($) { // START Reflection object.
// Creates a reflection for underneath an image.
// IE uses an image with IE specific filter properties, other browsers use the Canvas tag.
// The position and size of the reflection gets updated by updateAll() in Controller.
function Reflection(img, reflHeight, opacity) { var reflection, cntx, imageWidth = img.width, imageHeight = img.width, gradient, parent; parent = $(img.parentNode);
this.element = reflection = parent.append("<canvas class='reflection' style='position:absolute'/>").find(':last')[];
if (!reflection.getContext && $.browser.msie) {
this.element = reflection = parent.append("<img class='reflection' style='position:absolute'/>").find(':last')[];
reflection.src = img.src;
reflection.style.filter = "flipv progid:DXImageTransform.Microsoft.Alpha(opacity=" + (opacity * ) + ", style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=" + (reflHeight / imageHeight * ) + ")"; } else {
cntx = reflection.getContext("2d");
try { $(reflection).attr({ width: imageWidth, height: reflHeight });
cntx.save();
cntx.translate(, imageHeight - );
cntx.scale(, -);
cntx.drawImage(img, , , imageWidth, imageHeight);
cntx.restore();
cntx.globalCompositeOperation = "destination-out";
gradient = cntx.createLinearGradient(, , , reflHeight);
gradient.addColorStop(, "rgba(255, 255, 255, " + ( - opacity) + ")");
gradient.addColorStop(, "rgba(255, 255, 255, 1.0)");
cntx.fillStyle = gradient;
cntx.fillRect(, , imageWidth, reflHeight);
} catch (e) {
return;
}
}
// Store a copy of the alt and title attrs into the reflection
$(reflection).attr({ 'alt': $(img).attr('alt'), title: $(img).attr('title') }); } //END Reflection object // START Item object.
// A wrapper object for items within the carousel.
var Item = function (imgIn, options) {
this.orgWidth = imgIn.width;
this.orgHeight = imgIn.height;
this.image = imgIn;
this.reflection = null;
this.alt = imgIn.alt;
this.title = imgIn.title;
this.imageOK = false;
this.options = options; this.imageOK = true; if (this.options.reflHeight > ) {
this.reflection = new Reflection(this.image, this.options.reflHeight, this.options.reflOpacity);
}
$(this.image).css('position', 'absolute'); // Bizarre. This seems to reset image width to 0 on webkit!
};// END Item object // Controller object.
// This handles moving all the items, dealing with mouse clicks etc.
var Controller = function (container, images, options) {
var items = [], funcSin = Math.sin, funcCos = Math.cos, ctx = this;
this.controlTimer = ;
this.stopped = false;
//this.imagesLoaded = 0;
this.container = container;
this.xRadius = options.xRadius;
this.yRadius = options.yRadius;
this.showFrontTextTimer = ;
this.autoRotateTimer = ;
if (options.xRadius === ) {
this.xRadius = ($(container).width() / 2.3);
}
if (options.yRadius === ) {
this.yRadius = ($(container).height() / );
} this.xCentre = options.xPos;
this.yCentre = options.yPos;
this.frontIndex = ; // Index of the item at the front // Start with the first item at the front.
this.rotation = this.destRotation = Math.PI / ;
this.timeDelay = / options.FPS; // Turn on the infoBox
if (options.altBox !== null) {
$(options.altBox).css('display', 'block');
$(options.titleBox).css('display', 'block');
}
// Turn on relative position for container to allow absolutely positioned elements
// within it to work.
$(container).css({ position: 'relative', overflow: 'hidden' }); $(options.buttonLeft).css('display', 'inline');
$(options.buttonRight).css('display', 'inline'); // Setup the buttons.
$(options.buttonLeft).bind('mouseup', this, function (event) {
event.data.rotate(-);
return false;
});
$(options.buttonRight).bind('mouseup', this, function (event) {
event.data.rotate();
return false;
}); // You will need this plugin for the mousewheel to work: http://plugins.jquery.com/project/mousewheel
if (options.mouseWheel) {
$(container).bind('mousewheel', this, function (event, delta) {
event.data.rotate(delta);
return false;
});
}
$(container).bind('mouseover click', this, function (event) { clearInterval(event.data.autoRotateTimer); // Stop auto rotation if mouse over.
var text = $(event.target).attr('alt');
// If we have moved over a carousel item, then show the alt and title text. if (text !== undefined && text !== null) { clearTimeout(event.data.showFrontTextTimer);
$(options.altBox).html(($(event.target).attr('alt')));
$(options.titleBox).html(($(event.target).attr('title')));
if (options.bringToFront && event.type == 'click') { var idx = $(event.target).data('itemIndex');
var frontIndex = event.data.frontIndex;
//var diff = idx - frontIndex;
var diff = (idx - frontIndex) % images.length;
if (Math.abs(diff) > images.length / ) {
diff += (diff > ? -images.length : images.length);
} event.data.rotate(-diff);
}
}
});
// If we have moved out of a carousel item (or the container itself),
// restore the text of the front item in 1 second.
$(container).bind('mouseout', this, function (event) {
var context = event.data;
clearTimeout(context.showFrontTextTimer);
context.showFrontTextTimer = setTimeout(function () { context.showFrontText(); }, );
context.autoRotate(); // Start auto rotation.
}); // Prevent items from being selected as mouse is moved and clicked in the container.
$(container).bind('mousedown', this, function (event) { event.data.container.focus();
return false;
});
container.onselectstart = function () { return false; }; // For IE. this.innerWrapper = $(container).wrapInner('<div style="position:absolute;width:100%;height:100%;"/>').children()[]; // Shows the text from the front most item.
this.showFrontText = function () {
if (items[this.frontIndex] === undefined) { return; } // Images might not have loaded yet.
$(options.titleBox).html($(items[this.frontIndex].image).attr('title'));
$(options.altBox).html($(items[this.frontIndex].image).attr('alt'));
}; this.go = function () {
if (this.controlTimer !== ) { return; }
var context = this;
this.controlTimer = setTimeout(function () { context.updateAll(); }, this.timeDelay);
}; this.stop = function () {
clearTimeout(this.controlTimer);
this.controlTimer = ;
}; // Starts the rotation of the carousel. Direction is the number (+-) of carousel items to rotate by.
this.rotate = function (direction) {
this.frontIndex -= direction;
this.frontIndex %= items.length;
this.destRotation += (Math.PI / items.length) * ( * direction);
this.showFrontText();
this.go();
}; this.autoRotate = function () {
if (options.autoRotate !== 'no') {
var dir = (options.autoRotate === 'right') ? : -;
this.autoRotateTimer = setInterval(function () { ctx.rotate(dir); }, options.autoRotateDelay);
}
}; // This is the main loop function that moves everything.
this.updateAll = function () {
var minScale = options.minScale; // This is the smallest scale applied to the furthest item.
var smallRange = ( - minScale) * 0.5;
var w, h, x, y, scale, item, sinVal; var change = (this.destRotation - this.rotation);
var absChange = Math.abs(change); this.rotation += change * options.speed;
if (absChange < 0.001) { this.rotation = this.destRotation; }
var itemsLen = items.length;
var spacing = (Math.PI / itemsLen) * ;
//var wrapStyle = null;
var radians = this.rotation;
var isMSIE = $.browser.msie; // Turn off display. This can reduce repaints/reflows when making style and position changes in the loop.
// See http://dev.opera.com/articles/view/efficient-javascript/?page=3
this.innerWrapper.style.display = 'none'; var style;
var px = 'px', reflHeight;
var context = this;
for (var i = ; i < itemsLen ; i++) {
item = items[i]; sinVal = funcSin(radians); scale = ((sinVal + ) * smallRange) + minScale; x = this.xCentre + (((funcCos(radians) * this.xRadius) - (item.orgWidth * 0.5)) * scale);
y = this.yCentre + (((sinVal * this.yRadius)) * scale); if (item.imageOK) {
var img = item.image;
w = img.width = item.orgWidth * scale;
h = img.height = item.orgHeight * scale;
img.style.left = x + px;
img.style.top = y + px;
img.style.zIndex = "" + (scale * ) >> ; // >>0 = Math.foor(). Firefox doesn't like fractional decimals in z-index.
if (item.reflection !== null) {
reflHeight = options.reflHeight * scale;
style = item.reflection.element.style;
style.left = x + px;
style.top = y + h + options.reflGap * scale + px;
style.width = w + px;
if (isMSIE) {
style.filter.finishy = (reflHeight / h * );
} else {
style.height = reflHeight + px;
}
}
}
radians += spacing;
}
// Turn display back on.
this.innerWrapper.style.display = 'block'; // If we have a preceptable change in rotation then loop again next frame.
if (absChange >= 0.001) {
this.controlTimer = setTimeout(function () { context.updateAll(); }, this.timeDelay);
} else {
// Otherwise just stop completely.
this.stop();
}
}; // END updateAll // Create an Item object for each image
// func = function(){return;ctx.updateAll();} ; // Check if images have loaded. We need valid widths and heights for the reflections.
this.checkImagesLoaded = function () {
var i;
for (i = ; i < images.length; i++) {
if ((images[i].width === undefined) || ((images[i].complete !== undefined) && (!images[i].complete))) {
return;
}
}
for (i = ; i < images.length; i++) {
items.push(new Item(images[i], options));
$(images[i]).data('itemIndex', i);
}
// If all images have valid widths and heights, we can stop checking.
clearInterval(this.tt);
this.showFrontText();
this.autoRotate();
this.updateAll(); }; this.tt = setInterval(function () { ctx.checkImagesLoaded(); }, );
}; // END Controller object // The jQuery plugin part. Iterates through items specified in selector and inits a Controller class for each one.
$.fn.CloudCarousel = function (options) { this.each(function () { options = $.extend({}, {
reflHeight: ,
reflOpacity: 0.5,
reflGap: ,
minScale: 0.5,
xPos: ,
yPos: ,
xRadius: ,
yRadius: ,
altBox: null,
titleBox: null,
FPS: ,
autoRotate: 'no',
autoRotateDelay: ,
speed: 0.2,
mouseWheel: false,
bringToFront: false
}, options);
// Create a Controller for each carousel.
$(this).data('cloudcarousel', new Controller(this, $('.cloudcarousel', $(this)), options));
});
return this;
}; })(jQuery);

Cloud Carousel的更多相关文章

  1. jQuery 3D canvas 旋转木马(跑马灯)效果插件 - cloud carousel

    插件名称-cloud carousel 最新版本-1.0.5 支持ie6-ie9,firefox,chrome,opera,safari等 1.引入jquery1.4.2.js 和CloudCarou ...

  2. 一款超炫的jquery图片播放插件[Cloud Carousel]

    今天给大家介绍一个jquery图片播放插件,也可以说是一款幻灯片放映插件,它叫Cloud Carousel,支持自动播放.图片预览.鼠标滚轮滚动,非常酷,下图是效果预览. 该jquery图片播放项目演 ...

  3. jQuery 幻灯片 ----摘录

    Cloud Carousel (演示 | 下载) ShineTime (演示 | 下载) Nivo Slider (演示 | 下载) Interactive Photo Desk (演示 | 下载) ...

  4. 60款很酷的 jQuery 幻灯片演示和下载【转】

    jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入漂亮的效果,其中之一就是幻灯片效果的实现,这是一种在有限的网页空间内展 ...

  5. 33个好用的图片轮显 jquery图片轮显

    原文发布时间为:2011-05-28 -- 来源于本人的百度文章 [由搬家工具导入] 我个人还是喜欢 jquery.recycle,比较通用。因为由美工设计好的轮显结构,如果套用下面,就感觉不是很方便 ...

  6. 利用bootstrap的carousel.js实现轮播图动画

    前期准备: 1.jquery.js. 2.bootstrap的carousel.js. 3.bootstrap.css. 如果大家不知道在哪下载,可以联系小颖,小颖把这些js和css可以发送给你. 一 ...

  7. Carousel 旋转画廊特效的疑难杂症

    疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美, ...

  8. On cloud, be cloud native

    本来不想起一个英文名,但是想来想去都没能想出一个简洁地表述该意思的中文释义,所以就用了一个英文名称,望见谅. Cloud Native是一个刚刚由VMware所提出一年左右的名词.其表示在设计并实现一 ...

  9. 学会用bootstrap的modal和carousel

    bootstrap框架提供了很多好用的javascript组件,可以很方便的实现常用的js效果,比如点击弹出一个div(modal).下拉菜单.旋转木马(carousel或slider),非常适合前端 ...

随机推荐

  1. Xcode中为何要为设置bundle和App分别设置两份一样的图片资源

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 我们知道在App设置的bundle中有时也会用到图片资源,而在 ...

  2. Android的ExpandableListView-android学习之旅(二十八)

    ExpandableListView简介 ExpandableListView是ListView的子类,用法和ListView类似,ExpandableListView可以创建几个类别,每个类别下面又 ...

  3. 03 SeekBar 音频播放拖拽进度条

    八,  SeekBar  音频播放拖拽进度条       >                 android:progress="40"   第一进度         and ...

  4. J2EE学习从菜鸟变大鸟之七 Servlet

    Servlet现在自己的理解是一个控制器,简单的可以理解为不同的JSP页面由用户发送过来的请求可以由Servlet控制器来控制其向下调用的方向(结合三层好理解),但它比较特殊,因为它通常会从外界接收数 ...

  5. 精通CSS+DIV网页样式与布局--初探CSS

    CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...

  6. UNIX环境高级编程——pthread_create的问题

    linux 下常用的创建多线程函数pthread_create(pthread_t * thread , pthread_attr_t * attr , void *(*start_routine)( ...

  7. 使用LogKit进行日志操作

    1.      概述 任何一个系统中,日志都是不可缺少的,现在Apache提供了两套日志工具,一个就是Log4j,另一个是本文要给出例子的LogKit. Log4j和LogKit有很多相似的地方.比如 ...

  8. java 二进制数字符串转换工具类

    java 二进制数字符串转换工具类 将二进制转换成八进制 将二进制转换成十进制 将二进制转换成十六进制 将十进制转换成二进制 package com.iteye.injavawetrust.ad; i ...

  9. Android自定义view进阶-- 神奇的贝塞尔曲线

    上一篇介绍了自定义view需要知道的基本函数.新开一篇献给借给我vpn的深圳_奋斗小哥. 转载请注明出处:http://blog.csdn.net/wingichoy/article/details/ ...

  10. 【一天一道LeetCode】#25. Reverse Nodes in k-Group

    一天一道LeetCode系列 (一)题目 Given a linked list, reverse the nodes of a linked list k at a time and return ...