jQuery洗牌式图片层叠轮播滚动切换特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery洗牌式图片层叠轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery洗牌式图片层叠切换</title>
    <link rel="stylesheet" type="text/css" media="all" href="css/zzsc.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/roundabout.js"></script>
    <script type="text/javascript" src="js/zzsc.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#zzsc').roundabout({
                shape: 'figure8',
            });
        });
    </script>
</head> 
    <div id="slider">
        <div class="slider_area">
            <div class="slider_carousel">
               <ul id="zzsc">
			   		<li><img src="images/img01.jpg" /></li>
                    <li><img src="images/img02.jpg" /></li>
					<li><img src="images/img03.jpg" /></li>
                    <li><img src="images/img04.jpg" /></li>
					<li><img src="images/img05.jpg" /></li>
                </ul>
            </div>
        </div>
</div>
</html>

JS代码(zzsc.js):

jQuery.extend(jQuery.roundabout_shape,{
	theJuggler:function(r,a,t){
	return{
	x:Math.sin(r + a),y:Math.tan(Math.exp(Math.log(r)) + a) / (t - 1),z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,figure8:function(r,a,t){
	return{
	x:Math.sin(r * 2 + a),y:(Math.sin(r + Math.PI/2 + a) / 8) * t,z:(Math.cos(r + a) + 2) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2.3) + 0.71}
;
}
,waterWheel:function(r,a,t){
	return{
	x:(Math.sin(r + Math.PI/2 + a) / 8) * t,y:Math.sin(r + a) / (Math.PI/2),z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,square:function(r,a,t){
	var sq_x,sq_y,sq_z;
	if (r <= Math.PI/2){
	sq_x = (2/Math.PI) * r;
	sq_y = -(2/Math.PI) * r + 1;
	sq_z = -(1/Math.PI) * r + 1;
}
else if (r > Math.PI/2 && r <= Math.PI){
	sq_x = -(2/Math.PI) * r + 2;
	sq_y = -(2/Math.PI) * r + 1;
	sq_z = -(1/Math.PI) * r + 1;
}
else if (r > Math.PI && r <= (3 * Math.PI) / 2){
	sq_x = -(2/Math.PI) * r + 2;
	sq_y = (2/Math.PI) * r - 3;
	sq_z = (1/Math.PI) * r - 1;
}
else{
	sq_x = (2/Math.PI) * r - 4;
	sq_y = (2/Math.PI) * r - 3;
	sq_z = (1/Math.PI) * r - 1;
}
return{
	x:sq_x,y:sq_y * t,z:sq_z,scale:sq_z}
}
,conveyorBeltLeft:function(r,a,t){
	return{
	x:-Math.cos(r + a),y:(Math.cos(r + 3*Math.PI/2 + a) / 8) * t,z:(Math.sin(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,conveyorBeltRight:function(r,a,t){
	return{
	x:Math.cos(r + a),y:(Math.cos(r + 3*Math.PI/2 + a) / 8) * t,z:(Math.sin(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,goodbyeCruelWorld:function(r,a,t){
	return{
	x:Math.sin(r + a),y:(Math.tan(r + 3*Math.PI/2 + a) / 8) * (t + 0.5),z:(Math.sin(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,diagonalRingLeft:function(r,a,t){
	return{
	x:Math.sin(r + a),y:-Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,diagonalRingRight:function(r,a,t){
	return{
	x:Math.sin(r + a),y:Math.cos(r + Math.tan(Math.cos(a))) / (t + 1.5),z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
;
}
,rollerCoaster:function(r,a,t){
	return{
	x:Math.sin(r + a),y:Math.sin((2 + t) * r),z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
}
,tearDrop:function(r,a,t){
	return{
	x:Math.sin(r + a),y:-Math.sin(r/2 + t) + 0.35,z:(Math.cos(r + a) + 1) / 2,scale:(Math.sin(r + Math.PI/2 + a) / 2) + 0.5}
}
}
);

CSS代码(zzsc.css):

@charset "utf-8";/* CSS Document */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,form,img,dl,dt,dd,table,th,td,blockquote,fieldset,div,strong,label,em{margin:0;padding:0;border:0;}
ul,ol,li{list-style:none;}
input,button{margin:0;font-size:12px;vertical-align:middle;}
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;color:#333;margin:0 auto;}
table{border-collapse:collapse;border-spacing:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#c00;text-decoration:underline;}
/*slider_area*/
#slider{margin:40px auto;height:327px;width:1003px;}
#slider li{width:580px;padding:12px 0;height:303px;position:relative;border-radius:5px;border:1px solid #ccc;background:#fff;overflow:hidden;}
.slider_area{position:relative;}
.slider_carousel{position:absolute;width:750px;margin:0 0 0 110px;}
.roundabout-holder{padding:0;height:310px;position:absolute;}
.roundabout-moveable-item{border:0;cursor:pointer;list-style:none;width:425px;height:323px;}

附件:下载该文件资源,减少时间成本(增值服务)