轮播图3D效果--roundabout（兼容IE8）升级版

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin:0;
            padding:0;;
        }
        ul,li{
            list-style:none;
        }

        .roundabout-moveable-item{
            max-width:240px;!important;
        }
        .next {
            position: absolute;
            top: 372px;
            margin-top: -40px;
            z-index: 200;
            display: block;
            width: 80px;
            height: 80px;
            background-position: 0 0;
        }
        .prev{
            position: absolute;
            top: 457px;
            margin-top: -40px;
            z-index: 200;
            display: block;
            width: 80px;
            height: 80px;
            right: 14%;
            background-position: -80px 0;
        }
        .roundabout-holder{width:600px;height:400px;margin:0 auto;}
        .roundabout-moveable-item {width: 240px;height: 320px;cursor: pointer;}
        .roundabout-moveable-item img{width:100%;height: 100%}
        .roundabout-in-focus {}
        .settled-lb{
            width:900px;
            margin-left: 104px;
            margin-top: 50px;
        }
        .roundabout-moveable-item1{
            background:red;
        }
        .roundabout-moveable-item2{
            background:#808080;
        }
        .roundabout-moveable-item3{
            background:green;
        }
    </style>
</head>
<body>
<div class="settled-lb">
    <ul id="myroundabout" class="roundabout-holder" style="">
        <li class="roundabout-moveable-item roundabout-moveable-item1">
            <a href="javascript:void (0);" target="_blank">
                <img src="" alt="" style="">
            </a>
        </li>
        <li class="roundabout-moveable-item2">
            <a href="javascript:void (0);" target="_blank">
                <img src="">
            </a>
        </li>
        <li class="roundabout-moveable-item roundabout-in-focus roundabout-moveable-item3" style="">
            <a href="javascript:void (0);" target="_blank">
                <img src="">
            </a>
        </li>
    </ul>
    <a href="#" class="next ">&lt;</a>
    <a href="#" class="prev">&gt;</a>
</div>
</body>
<script src="jquery-1.11.3.min.js"></script>
<script src="jquery.roundabout-1.0.min.js"></script>
<script src="jquery.easing.1.3.min.js"></script>
<script>
    $(document).ready(function () {
        $(‘#myroundabout‘).roundabout({
            btnNext: ".next",
            btnPrev:".prev",
            autoplay: false,
            autoplayDuration: 3000,
            autoplayPauseOnHover: true,
            shape: ‘square‘,
            minOpacity: 1
        });
    });
</script>
</html>

html

jQuery.easing[‘jswing‘]=jQuery.easing[‘swing‘];jQuery.extend(jQuery.easing,{def:‘easeOutQuad‘,swing:function(x,t,b,c,d){return jQuery.easing[jQuery.easing.def](x,t,b,c,d);},easeInQuad:function(x,t,b,c,d){return c*(t/=d)*t+b;},easeOutQuad:function(x,t,b,c,d){return-c*(t/=d)*(t-2)+b;},easeInOutQuad:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t+b;return-c/2*((--t)*(t-2)-1)+b;},easeInCubic:function(x,t,b,c,d){return c*(t/=d)*t*t+b;},easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;},easeInOutCubic:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t+b;return c/2*((t-=2)*t*t+2)+b;},easeInQuart:function(x,t,b,c,d){return c*(t/=d)*t*t*t+b;},easeOutQuart:function(x,t,b,c,d){return-c*((t=t/d-1)*t*t*t-1)+b;},easeInOutQuart:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t+b;return-c/2*((t-=2)*t*t*t-2)+b;},easeInQuint:function(x,t,b,c,d){return c*(t/=d)*t*t*t*t+b;},easeOutQuint:function(x,t,b,c,d){return c*((t=t/d-1)*t*t*t*t+1)+b;},easeInOutQuint:function(x,t,b,c,d){if((t/=d/2)<1)return c/2*t*t*t*t*t+b;return c/2*((t-=2)*t*t*t*t+2)+b;},easeInSine:function(x,t,b,c,d){return-c*Math.cos(t/d*(Math.PI/2))+c+b;},easeOutSine:function(x,t,b,c,d){return c*Math.sin(t/d*(Math.PI/2))+b;},easeInOutSine:function(x,t,b,c,d){return-c/2*(Math.cos(Math.PI*t/d)-1)+b;},easeInExpo:function(x,t,b,c,d){return(t==0)?b:c*Math.pow(2,10*(t/d-1))+b;},easeOutExpo:function(x,t,b,c,d){return(t==d)?b+c:c*(-Math.pow(2,-10*t/d)+1)+b;},easeInOutExpo:function(x,t,b,c,d){if(t==0)return b;if(t==d)return b+c;if((t/=d/2)<1)return c/2*Math.pow(2,10*(t-1))+b;return c/2*(-Math.pow(2,-10*--t)+2)+b;},easeInCirc:function(x,t,b,c,d){return-c*(Math.sqrt(1-(t/=d)*t)-1)+b;},easeOutCirc:function(x,t,b,c,d){return c*Math.sqrt(1-(t=t/d-1)*t)+b;},easeInOutCirc:function(x,t,b,c,d){if((t/=d/2)<1)return-c/2*(Math.sqrt(1-t*t)-1)+b;return c/2*(Math.sqrt(1-(t-=2)*t)+1)+b;},easeInElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return-(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;},easeOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d)==1)return b+c;if(!p)p=d*.3;if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);return a*Math.pow(2,-10*t)*Math.sin((t*d-s)*(2*Math.PI)/p)+c+b;},easeInOutElastic:function(x,t,b,c,d){var s=1.70158;var p=0;var a=c;if(t==0)return b;if((t/=d/2)==2)return b+c;if(!p)p=d*(.3*1.5);if(a<Math.abs(c)){a=c;var s=p/4;}
else var s=p/(2*Math.PI)*Math.asin(c/a);if(t<1)return-.5*(a*Math.pow(2,10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p))+b;return a*Math.pow(2,-10*(t-=1))*Math.sin((t*d-s)*(2*Math.PI)/p)*.5+c+b;},easeInBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*(t/=d)*t*((s+1)*t-s)+b;},easeOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;return c*((t=t/d-1)*t*((s+1)*t+s)+1)+b;},easeInOutBack:function(x,t,b,c,d,s){if(s==undefined)s=1.70158;if((t/=d/2)<1)return c/2*(t*t*(((s*=(1.525))+1)*t-s))+b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t+s)+2)+b;},easeInBounce:function(x,t,b,c,d){return c-jQuery.easing.easeOutBounce(x,d-t,0,c,d)+b;},easeOutBounce:function(x,t,b,c,d){if((t/=d)<(1/2.75)){return c*(7.5625*t*t)+b;}else if(t<(2/2.75)){return c*(7.5625*(t-=(1.5/2.75))*t+.75)+b;}else if(t<(2.5/2.75)){return c*(7.5625*(t-=(2.25/2.75))*t+.9375)+b;}else{return c*(7.5625*(t-=(2.625/2.75))*t+.984375)+b;}},easeInOutBounce:function(x,t,b,c,d){if(t<d/2)return jQuery.easing.easeInBounce(x,t*2,0,c,d)*.5+b;return jQuery.easing.easeOutBounce(x,t*2-d,0,c,d)*.5+c*.5+b;}});

jquery.easing.1.3.min.js

/**
 * jQuery Roundabout - v1.0 (minified)
 * http://fredhq.com/projects/roundabout/
 * Download by http://www.codefans.net
 * Moves list-items of enabled ordered and unordered lists long
 * a chosen path. Includes the default "lazySusan" path, that
 * moves items long a spinning turntable.
 *
 * Terms of Use // jQuery Roundabout
 *
 * Open source under the BSD license
 *
 * Copyright (c) 2009, Fred LeBlanc
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are met:
 *
 *   - Redistributions of source code must retain the above copyright
 *     notice, this list of conditions and the following disclaimer.
 *   - Redistributions in binary form must reproduce the above
 *     copyright notice, this list of conditions and the following
 *     disclaimer in the documentation and/or other materials provided
 *     with the distribution.
 *   - Neither the name of the author nor the names of its contributors
 *     may be used to endorse or promote products derived from this
 *     software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
 * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
 * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
 * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
 * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
 * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
 * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
 * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
 * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
 * POSSIBILITY OF SUCH DAMAGE.
 */
jQuery.extend({roundabout_shape:{def:‘lazySusan‘,lazySusan:function(r,a,t){return{x:Math.sin(r+a),y:(Math.sin(r+3*Math.PI/2+a)/8)*t,z:(Math.cos(r+a)+1)/2,scale:(Math.sin(r+Math.PI/2+a)/2)+0.5}}}});jQuery.fn.roundabout=function(){var options=(typeof arguments[0]!=‘object‘)?{}:arguments[0];options={bearing:(typeof options.bearing==‘undefined‘)?0.0:parseFloat(options.bearing%360.0,4),tilt:(typeof options.tilt==‘undefined‘)?0.0:parseFloat(options.tilt,4),minZ:(typeof options.minZ==‘undefined‘)?100:parseInt(options.minZ,10),maxZ:(typeof options.maxZ==‘undefined‘)?400:parseInt(options.maxZ,10),minOpacity:(typeof options.minOpacity==‘undefined‘)?0.40:parseFloat(options.minOpacity,2),maxOpacity:(typeof options.maxOpacity==‘undefined‘)?1.00:parseFloat(options.maxOpacity,2),minScale:(typeof options.minScale==‘undefined‘)?0.40:parseFloat(options.minScale,2),maxScale:(typeof options.maxScale==‘undefined‘)?1.00:parseFloat(options.maxScale,2),duration:(typeof options.duration==‘undefined‘)?600:parseInt(options.duration,10),btnNext:options.btnNext||null,btnPrev:options.btnPrev||null,easing:options.easing||‘swing‘,clickToFocus:(options.clickToFocus!==false),focusBearing:(typeof options.focusBearing==‘undefined‘)?0.0:parseFloat(options.focusBearing%360.0,4),shape:options.shape||‘lazySusan‘,debug:options.debug||false,childSelector:options.childSelector||‘li‘,startingChild:(typeof options.startingChild==‘undefined‘)?null:parseInt(options.startingChild,10)};this.each(function(i){var ref=jQuery(this);var childSelector=options.childSelector;var children=ref.children(childSelector);var period=360.0/children.length;var startingBearing=(options.startingChild===null)?options.bearing:options.startingChild*period;ref.addClass(‘roundabout-holder‘).css(‘padding‘,0).css(‘position‘,‘relative‘).css(‘z-index‘,options.minZ).attr(‘bearing‘,startingBearing).attr(‘tilt‘,options.tilt).attr(‘minZ‘,options.minZ).attr(‘maxZ‘,options.maxZ).attr(‘minOpacity‘,options.minOpacity).attr(‘maxOpacity‘,options.maxOpacity).attr(‘minScale‘,options.minScale).attr(‘maxScale‘,options.maxScale).attr(‘duration‘,options.duration).attr(‘easing‘,options.easing).attr(‘clickToFocus‘,options.clickToFocus).attr(‘focusBearing‘,options.focusBearing).attr(‘animating‘,‘0‘).attr(‘childInFocus‘,-1).attr(‘shape‘,options.shape).attr(‘period‘,period).attr(‘debug‘,options.debug).attr(‘childSelector‘,options.childSelector);children.each(function(i){var degrees=period*i;var startPos;jQuery(this).addClass(‘roundabout-moveable-item‘).css(‘position‘,‘absolute‘).attr(‘degrees‘,degrees);startPos=[jQuery(this).width(),jQuery(this).height(),parseInt(jQuery(this).css(‘font-size‘),10)];jQuery(this).attr(‘startPos‘,startPos.join(‘,‘));if(options.clickToFocus===true){jQuery(this).click(function(e){if(!jQuery.roundabout_isInFocus(ref,degrees)){e.preventDefault();if(ref.attr(‘animating‘)==‘0‘){ref.roundabout_animateAngleToFocus(degrees)}return false}})}});if(options.btnNext){jQuery(options.btnNext).click(function(e){e.preventDefault();if(ref.attr(‘animating‘)==‘0‘){ref.roundabout_animateToNextChild()}return false})}if(options.btnPrev){jQuery(options.btnPrev).click(function(e){e.preventDefault();if(ref.attr(‘animating‘)==‘0‘){ref.roundabout_animateToPreviousChild()}return false})}ref.roundabout_updateChildPositions()});return this};jQuery.fn.roundabout_setTilt=function(newTilt){this.each(function(i){jQuery(this).attr(‘tilt‘,newTilt);jQuery(this).roundabout_updateChildPositions()});return this};jQuery.fn.roundabout_setBearing=function(newBearing){this.each(function(i){jQuery(this).attr(‘bearing‘,parseFloat(newBearing%360,4));jQuery(this).roundabout_updateChildPositions()});if(typeof arguments[1]===‘function‘){var callback=arguments[1];setTimeout(function(){callback()},0)}return this};jQuery.fn.roundabout_adjustBearing=function(delta){delta=parseFloat(delta,4);if(delta!==0){this.each(function(i){jQuery(this).attr(‘bearing‘,jQuery.roundabout_getBearing(jQuery(this))+delta);jQuery(this).roundabout_updateChildPositions()})}return this};jQuery.fn.roundabout_adjustTilt=function(delta){delta=parseFloat(delta,4);this.each(function(i){jQuery(this).attr(‘tilt‘,parseFloat(jQuery(this).attr(‘tilt‘),4)+delta);jQuery(this).roundabout_updateChildPositions()});return this};jQuery.fn.roundabout_animateToBearing=function(bearing){bearing=parseFloat(bearing,4);var currentTime=new Date();var data=(typeof arguments[3]!==‘object‘)?null:arguments[3];var duration=(typeof arguments[1]==‘undefined‘)?null:arguments[1];var easingType=(typeof arguments[2]!=‘undefined‘)?arguments[2]:null;this.each(function(i){var ref=jQuery(this),timer,easingFn,newBearing;var thisDuration=(duration===null)?parseInt(ref.attr(‘duration‘),10):duration;var thisEasingType=(easingType!==null)?easingType:ref.attr(‘easing‘)||‘swing‘;if(data===null){data={timerStart:currentTime,start:jQuery.roundabout_getBearing(ref),totalTime:thisDuration}}timer=currentTime-data.timerStart;if(timer<thisDuration){ref.attr(‘animating‘,‘1‘);if(typeof jQuery.easing.def==‘string‘){easingFn=jQuery.easing[thisEasingType]||jQuery.easing[jQuery.easing.def];newBearing=easingFn(null,timer,data.start,bearing-data.start,data.totalTime)}else{newBearing=jQuery.easing[thisEasingType]((timer/data.totalTime),timer,data.start,bearing-data.start,data.totalTime)}ref.roundabout_setBearing(newBearing,function(){ref.roundabout_animateToBearing(bearing,thisDuration,thisEasingType,data)})}else{bearing=(bearing<0)?bearing+360:bearing%360;ref.attr(‘animating‘,‘0‘);ref.roundabout_setBearing(bearing)}});return this};jQuery.fn.roundabout_animateToDelta=function(delta){var duration,easing;if(typeof arguments[1]!==‘undefined‘){duration=arguments[1]}if(typeof arguments[2]!==‘undefined‘){easing=arguments[2]}this.each(function(i){delta=jQuery.roundabout_getBearing(jQuery(this))+delta;jQuery(this).roundabout_animateToBearing(delta,duration,easing)});return this};jQuery.fn.roundabout_animateToChild=function(childPos){var duration,easing;if(typeof arguments[1]!==‘undefined‘){duration=arguments[1]}if(typeof arguments[2]!==‘undefined‘){easing=arguments[2]}this.each(function(i){var ref=jQuery(this);if(parseInt(ref.attr(‘childInFocus‘),10)!==childPos&&ref.attr(‘animating‘,‘0‘)){var child=jQuery(ref.children(ref.attr(‘childSelector‘))[childPos]);ref.roundabout_animateAngleToFocus(parseFloat(child.attr(‘degrees‘),4),duration,easing)}});return this};jQuery.fn.roundabout_animateToNextChild=function(){var duration,easing;if(typeof arguments[0]!==‘undefined‘){duration=arguments[0]}if(typeof arguments[1]!==‘undefined‘){easing=arguments[1]}this.each(function(i){if(jQuery(this).attr(‘animating‘,‘0‘)){var bearing=360.0-jQuery.roundabout_getBearing(jQuery(this));var period=parseFloat(jQuery(this).attr(‘period‘),4),j=0,range;while(true){range={lower:period*j,upper:period*(j+1)};if(bearing<=range.upper&&bearing>range.lower){jQuery(this).roundabout_animateToDelta(bearing-range.lower,duration,easing);break}j++}}});return this};jQuery.fn.roundabout_animateToPreviousChild=function(){var duration,easing;if(typeof arguments[0]!==‘undefined‘){duration=arguments[0]}if(typeof arguments[1]!==‘undefined‘){easing=arguments[1]}this.each(function(i){if(jQuery(this).attr(‘animating‘,‘0‘)){var bearing=360.0-jQuery.roundabout_getBearing(jQuery(this));var period=parseFloat(jQuery(this).attr(‘period‘),4),j=0,range;while(true){range={lower:period*j,upper:period*(j+1)};if(bearing>=range.lower&&bearing<range.upper){jQuery(this).roundabout_animateToDelta(bearing-range.upper,duration,easing);break}j++}}});return this};jQuery.fn.roundabout_animateAngleToFocus=function(target){var duration,easing;if(typeof arguments[1]!==‘undefined‘){duration=arguments[1]}if(typeof arguments[2]!==‘undefined‘){easing=arguments[2]}this.each(function(i){var delta=jQuery.roundabout_getBearing(jQuery(this))-target;delta=(Math.abs(360.0-delta)<Math.abs(0.0-delta))?360.0-delta:0.0-delta;delta=(delta>180)?-(360.0-delta):delta;if(delta!==0){jQuery(this).roundabout_animateToDelta(delta,duration,easing)}});return this};jQuery.fn.roundabout_updateChildPositions=function(){this.each(function(i){var ref=jQuery(this);var inFocus=-1;var data={bearing:jQuery.roundabout_getBearing(ref),tilt:parseFloat(ref.attr(‘tilt‘),4),stage:{width:Math.floor(ref.width()*0.9),height:Math.floor(ref.height()*0.9)},animating:ref.attr(‘animating‘),inFocus:parseInt(ref.attr(‘childInFocus‘),10),focusBearingRad:jQuery.roundabout_degToRad(parseFloat(ref.attr(‘focusBearing‘),4)),shape:jQuery.roundabout_shape[ref.attr(‘shape‘)]||jQuery.roundabout_shape[jQuery.roundabout_shape.def]};data.midStage={width:data.stage.width/2,height:data.stage.height/2};data.nudge={width:data.midStage.width+data.stage.width*0.05,height:data.midStage.height+data.stage.height*0.05};data.zValues={min:parseInt(ref.attr(‘minZ‘),10),max:parseInt(ref.attr(‘maxZ‘),10)};data.zValues.diff=data.zValues.max-data.zValues.min;data.opacity={min:parseFloat(ref.attr(‘minOpacity‘),2),max:parseFloat(ref.attr(‘maxOpacity‘),2)};data.opacity.diff=data.opacity.max-data.opacity.min;data.scale={min:parseFloat(ref.attr(‘minScale‘),2),max:parseFloat(ref.attr(‘maxScale‘),2)};data.scale.diff=data.scale.max-data.scale.min;ref.children(ref.attr(‘childSelector‘)).each(function(i){if(jQuery.roundabout_updateChildPosition(jQuery(this),ref,data,i)&&data.animating==‘0‘){inFocus=i;jQuery(this).addClass(‘roundabout-in-focus‘)}else{jQuery(this).removeClass(‘roundabout-in-focus‘)}});if(inFocus!==data.inFocus){jQuery.roundabout_triggerEvent(ref,data.inFocus,‘blur‘);if(inFocus!==-1){jQuery.roundabout_triggerEvent(ref,inFocus,‘focus‘)}ref.attr(‘childInFocus‘,inFocus)}});return this};jQuery.roundabout_getBearing=function(el){return parseFloat(el.attr(‘bearing‘),4)%360};jQuery.roundabout_degToRad=function(degrees){return(degrees%360.0)*Math.PI/180.0};jQuery.roundabout_isInFocus=function(el,target){return(jQuery.roundabout_getBearing(el)%360===(target%360))};jQuery.roundabout_triggerEvent=function(el,child,eventType){return(child<0)?this:jQuery(el.children(el.attr(‘childSelector‘))[child]).trigger(eventType)};jQuery.roundabout_updateChildPosition=function(child,container,data,childPos){var ref=jQuery(child),out=[];var startPos=ref.attr(‘startPos‘).split(‘,‘);var itemData={startWidth:startPos[0],startHeight:startPos[1],startFontSize:startPos[2],degrees:parseFloat(ref.attr(‘degrees‘),4)};var rad=jQuery.roundabout_degToRad((360.0-itemData.degrees)+data.bearing);while(rad<0){rad=rad+Math.PI*2}while(rad>Math.PI*2){rad=rad-Math.PI*2}var factors=data.shape(rad,data.focusBearingRad,data.tilt);factors.scale=(factors.scale>1)?1:factors.scale;factors.adjustedScale=(data.scale.min+(data.scale.diff*factors.scale)).toFixed(4);factors.width=factors.adjustedScale*itemData.startWidth;factors.height=factors.adjustedScale*itemData.startHeight;ref.css(‘left‘,((factors.x*data.midStage.width+data.nudge.width)-factors.width/2.0).toFixed(2)+‘px‘).css(‘top‘,((factors.y*data.midStage.height+data.nudge.height)-factors.height/2.0).toFixed(2)+‘px‘).css(‘width‘,factors.width.toFixed(2)+‘px‘).css(‘height‘,factors.height.toFixed(2)+‘px‘).css(‘opacity‘,(data.opacity.min+(data.opacity.diff*factors.scale)).toFixed(2)).css(‘z-index‘,parseInt(data.zValues.min+(data.zValues.diff*factors.z),10)).css(‘font-size‘,(factors.adjustedScale*itemData.startFontSize).toFixed(2)+‘px‘).attr(‘current-scale‘,factors.adjustedScale);if(container.attr(‘debug‘)==‘true‘){out.push(‘<div style="font-weight: normal; font-size: 10px; padding: 2px; width: ‘+ref.css(‘width‘)+‘; background-color: #ffc;">‘);out.push(‘<strong style="font-size: 12px; white-space: nowrap;">Child ‘+childPos+‘</strong><br />‘);out.push(‘<strong>left:</strong> ‘+ref.css(‘left‘)+‘<br /><strong>top:</strong> ‘+ref.css(‘top‘)+‘<br />‘);out.push(‘<strong>width:</strong> ‘+ref.css(‘width‘)+‘<br /><strong>opacity:</strong> ‘+ref.css(‘opacity‘)+‘<br />‘);out.push(‘<strong>z-index:</strong> ‘+ref.css(‘z-index‘)+‘<br /><strong>font-size:</strong> ‘+ref.css(‘font-size‘)+‘<br />‘);out.push(‘<strong>scale:</strong> ‘+ref.attr(‘current-scale‘));out.push(‘</div>‘);ref.html(out.join(‘‘))}return jQuery.roundabout_isInFocus(container,itemData.degrees)};

jquery.roundabout-1.0.min.js

时间： 2024-10-06 20:40:45

轮播图3D效果--roundabout（兼容IE8）升级版的相关文章

轮播图的效果实现小米商城和京东商城

案例一: 效果如下:类似小米商城的轮播图 自动切换的:左右的 路径结构: 代码如下: <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        *{            padd

3d轮播图的效果实现

最近工程比较松,所以自己研究了一下3d轮播图的实现原理,其实说白了也不是很难就是在x,y,z轴上的平移和整个平面的旋转变换达到的效果, 下面是实现代码 html部分 <div class="stage"> <div class="contains"> <div style="transform: rotateY(0deg) translateZ(400px);">关于我</div> <div

轮播图中播放视频 兼容处理

{"isShowVideo":"1","videolist":[ {"desc":"000","url":"images/video.mp4","img":"images/image1.png"}, {"desc":"00","url":"",&qu

jquery里面的attr和css来设置轮播图竟然效果不一致

/*封装$*/ // window.$=HTMLElement.prototype.$=function(selector){ // var elems=(this==window?document:this) // .querySelectorAll(selector); // return elems.length==0?null:elems.length==1?elems[0]:elems; // } /*广告图片数组*/ var imgs=[ {"i":0,"img&

jQuery实现简易轮播图的效果

(图片素材取自于小米官网) 刚开始接触jQuery的学习,个人觉得如果为了实现多数的动态效果,jQuery的确很简易方便. 下面简易的轮播图效果,还请前辈多多指教~ (努力学习react vue angular中,加油~~~) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &

使用JS实现轮播图的效果

其中的一些css样式代码就省略了,下面只把结构层html.行为层js的代码展示出来 ,看代码说事. 一.简单的轮播图 <div class="box" id="box"> <div class="inner"> <ul> <li><a href="#"><img src="images/01.jpg" alt=""/>

Web全栈之路 1.CSS3中3D立方体以及3D轮播图

1.3D坐标系 3D坐标可以用左手来模拟,其中大拇指方向默认是X轴正方向,食指方向是Y轴正方向,中指方向是Z轴正方向.注意:当设置transform:rotateX(90deg)时,相当于将X轴转动90°,此时Z轴正方向向上,所以设置transform:translateZ(150px)时,就产生了3D立方体的上面,具体原理可以通过chrome浏览器审查元素来调试. 2.3D视图 transform-style:flat(默认,二维效果) / preserve-3d(三维效果).设置一个元素的t

viewpager实现轮播图效果

在很多app中我们都有轮播图的效果,特别是一些电商类的app,大部分都有此功能,今天就简单的模仿下,还有一个自动跳动的小功能,这个用定时器实现就行,话不多说直接上代码: import java.util.ArrayList; import java.util.concurrent.Executors; import java.util.concurrent.ScheduledExecutorService; import java.util.concurrent.TimeUnit; import

小程序实践（二）：swiper组件实现轮播图效果

swiper组件类似于Android中的ViewPager,实现类似轮播图的效果,相对于Android的Viewpager,swiper实现起来更加方便,快捷. 效果图: 首先看下swiper支持的属性: ------------------------------------------------------------------------------------   具体实现轮播功能:    一.添加轮播图片素材   在项目根目录下新建一个目录用于存储图片资源,目录名随意