《RotatingSlideshow图片切换播》由会员分享，可在线阅读，更多相关《RotatingSlideshow图片切换播（9页珍藏版）》请在金锄头文库上搜索。
1、Rotating Slideshow*margin:0;padding:0;htmlbackground:url(./img/page_bg_tile.jpg) #202027;bodycolor:#999;background-image:url(./img/contour.png),url(./img/page_bg.jpg);background-repeat:no-repeat,no-repeat;background-position: center 117px, center -200px;font:15px Calibri,Arial,sans-serif;border:1px
2、solid transparent;/* Styling the slideshow */#slideShowContainerwidth:510px;height:510px;position:relative;margin:120px auto 50px;#slideShowposition:absolute;height:490px;width:490px;background-color:#fff;margin:10px 0 0 10px;z-index:100;-moz-box-shadow:0 0 10px #111;-webkit-box-shadow:0 0 10px #111
3、;box-shadow:0 0 10px #111;#slideShow ulposition:absolute;top:15px;right:15px;bottom:15px;left:15px;list-style:none;overflow:hidden;#slideShow liposition:absolute;top:0;left:0;width:100%;height:100%;#slideShowContainer aborder:none;text-decoration:none;text-indent:-99999px;overflow:hidden;width:36px;
4、height:37px;background:url(./img/arrows.png) no-repeat;position:absolute;top:50%;margin-top:-21px;#previousLinkleft:-38px;#previousLink:hoverbackground-position:bottom left;a#nextLinkright:-38px;background-position:top right;#nextLink:hoverbackground-position:bottom right;/* General styles */.notema
5、rgin-bottom:40px;text-align:center;.creditfont-size:12px;.credit acolor:#bbb !important;a, a:visited text-decoration:underline;outline:none;color:#97CAE6;a:hovertext-decoration:none; »«(function($) var div = document.createElement(div),divStyle = div.style,support = $.support;support.tra
6、nsform = divStyle.MozTransform = ? MozTransform :(divStyle.MsTransform = ? MsTransform :(divStyle.WebkitTransform = ? WebkitTransform : (divStyle.OTransform = ? OTransform :false);support.matrixFilter = !support.transform & divStyle.filter = ;div = null;$.cssNumber.rotate = true;$.cssHooks.rotate =
7、set: function( elem, value ) var _support = support,supportTransform = _support.transform,cos, sin,centerOrigin;if (typeof value = string) value = toRadian(value);$.data( elem, transform, rotate: value);if (supportTransform) elem.stylesupportTransform = rotate(+ value +rad); else if (_support.matrix
8、Filter) cos = Math.cos(value);sin = Math.sin(value);elem.style.filter = progid:DXImageTransform.Microsoft.Matrix(,M11=+cos+,M12=+(-sin)+,M21=+sin+,M22=+cos+,SizingMethod=auto expand,).join();/ From pbakauss Transformie http:/ = $.rotate.centerOrigin) elem.stylecenterOrigin = margin ? marginLeft : le
9、ft = -(elem.offsetWidth/2) + (elem.clientWidth/2) + px;elem.stylecenterOrigin = margin ? marginTop : top = -(elem.offsetHeight/2) + (elem.clientHeight/2) + px;,get: function( elem, computed ) var transform = $.data( elem, transform );return transform & transform.rotate? transform.rotate : 0;$.fx.ste
10、p.rotate = function( fx ) $.cssHooks.rotate.set( fx.elem, fx.now+fx.unit );function radToDeg( rad ) return rad * 180 / Math.PI;function toRadian(value) if(value.indexOf(deg) != -1) return parseInt(value,10) * (Math.PI * 2 / 360); else if (value.indexOf(grad) != -1) return parseInt(value,10) * (Math.
11、PI/200);return parseFloat(value);$.rotate = centerOrigin: margin,radToDeg: radToDeg;)(jQuery);$(document).ready(function()var slideShow = $(#slideShow),ul = slideShow.find(ul),li = ul.find(li),cnt = li.length;/ As the images are positioned absolutely, the last image will be shown on top./ This is wh
12、y we force them in the correct order by assigning z-indexes:updateZindex();if($.support.transform)/ Modern browsers with support for css3 transformationsli.find(img).css(rotate,function(i)/ Rotating the images counterclockwisereturn (-90*i) + deg;);/ Binding a custom event. the direction and degrees
13、 parameters/ are passed when the event is triggered later on in the code.slideShow.bind(rotateContainer,function(e,direction,degrees)/ Enlarging the slideshow and photo:slideShow.animate(width : 510,height : 510,marginTop : 0,marginLeft : 0,fast,function()if(direction = next)/ Moving the topmost ima
14、ge containing Li at/ the bottom after a fadeOut animation$(li:first).fadeOut(slow,function()$(this).remove().appendTo(ul).show();updateZindex(););else / Showing the bottomost Li element on top / with a fade in animation. Notice that we are/ updating the z-indexes.var liLast = $(li:last).hide().remov
15、e().prependTo(ul);updateZindex();liLast.fadeIn(slow);/ Rotating the slideShow. css(rotate) gives us the/ current rotation in radians. We are converting it to/ degress so we can add 90 or -90 to rotate it to its new value.slideShow.animate(rotate:Math.round($.rotate.radToDeg(slideShow.css(rotate)+degrees) + deg,slow).animate(width : 490,height : 490,marginTop : 10,marginLeft : 10,fast);););/ By triggering the custom events below, w
