H5转盘抽奖，需要引入js（奖品由后台配置）

H5转盘抽奖

			<div class="head_top">
				<div class="head_rotary">
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
					<div class="rotate_con">
						<div class="rotate_prize_tit"></div>						
						<div class="rotate_prize_img_wrap">
							<img src="" class="rotate_prize_img"/>
						</div>
					</div>
				</div>
				<div class="rotate_cli"></div>
			</div>

head_top是最外面的大盒子，head_rotary是转盘的圆圈图，rotate_con是每一个奖品的位置，rotate_cli是中间开始抽奖的按钮。
rotateArr这个数组放后台配置的奖品图片和文字，rotateResult 是后台返回的中奖结果，通过数字来判断。

<script type="text/javascript">
var rotateArr=[
	['谢谢参与','img/22.png'],
	['腾讯视频会员月卡','img/11.png'],
	['谢谢参与','img/22.png'],
	['腾讯视频会员月卡','img/11.png'],
	['谢谢参与','img/22.png'],
	['腾讯视频会员月卡','img/11.png']
];	
for(var i=0;i<6;i++){
	$('.rotate_prize_tit').eq(i).html(rotateArr[i][0]);
	$('.rotate_prize_img').eq(i).attr('src',rotateArr[i][1]);	
};
//点击转盘
var $rotaryArrow = $('.head_rotary');
var $rot = $('.rotate_cli');
var rotateResult = 2;//中奖结果
var isStatr = false ; //锁 专拍没有执行完的时候 不可以再次点击 ;
$rot.click(function(){
	if(!isStatr){
        isStatr = true;       
	    switch(rotateResult){
	    	case 0:
	            rotateFunc(0,0,rotateArr[0][0]);
	            break;
	        case 1:
	            rotateFunc(1,300,rotateArr[1][0]);
	            break;
	        case 2:
	            rotateFunc(2,240,rotateArr[2][0]);
	            break;
	        case 3:
	            rotateFunc(3,180,rotateArr[3][0]);
	            break;
	        case 4:
	            rotateFunc(4,120,rotateArr[4][0]);
	            break;
	        case 5:
	            rotateFunc(5,60,rotateArr[5][0]);
	            break;     
	        default:
	            rotateFunc(0,0,rotateArr[0][0]);
	    };
    }else{
        return false;
    };
});
var rotateFunc = function(awards,angle,text){  //awards:奖项，angle:奖项对应的角度
    $rotaryArrow.stopRotate();
    $rotaryArrow.rotate({
        angle: 0,
        duration: 3000,
        animateTo: angle + 1080,  //angle是图片上各奖项对应的角度，1440是让指针固定旋转4圈
        callback: function(){
        	$('.prize_name').html(rotateArr[rotateResult][0]);
        	$('.prize_wrap').show();
        }
    });
};
</script>

.head_top{
	width: 100%;
	height: 24.825rem;
	background: url(../img/bg2.png) no-repeat;
	background-size:100% 100%;
	margin-top: 1.5rem;
	overflow: hidden;
	position: relative;
}
.head_rotary{
	width: 15.1rem;
	height: 15.15rem;
	background: url(../img/Rotary.png) no-repeat;
	background-size:100% 100% ;
	margin: 3.5rem auto 0;
	position: relative;	
}
.rotate_con {
    width: 5.9rem;
    height: 5.9rem;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    margin-top: 1.5rem;
}
.rotate_prize_tit {
    font-size: 0.65rem;
    color: #e72222;
    width: 100%;
    text-align: center;
}
.rotate_prize_img_wrap {
    position: relative;
    width: 2.5rem;
    height: 2.35rem;
    margin: 0 auto;
}
.rotate_prize_img {
    width: 2.3rem;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
}
.rotate_con:nth-child(2) {
    transform: rotate(60deg);
    transform-origin: bottom center;
}
.rotate_con:nth-child(3) {
    transform: rotate(120deg);
    transform-origin: bottom center;
}
.rotate_con:nth-child(4) {
    transform: rotate(180deg);
    transform-origin: bottom center;
}
.rotate_con:nth-child(5) {
    transform: rotate(240deg);
    transform-origin: bottom center;
}
.rotate_con:nth-child(6) {
    transform: rotate(300deg);
    transform-origin: bottom center;
}
.rotate_cli {
    width: 3.45rem;
    height: 4.05rem;
    background: url(../img/rorate.png) no-repeat;
    background-size: 100% 100%;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 8.575rem;
    cursor: pointer;
}

由于要引入JS，这里没弄下载链接，只能附上代码了

(function(k){for(var d,f,l=document.getElementsByTagName("head")[0].style,h=["transformProperty","WebkitTransform","OTransform","msTransform","MozTransform"],g=0;g<h.length;g++)void 0!==l[h[g]]&&(d=h[g]);d&&(f=d.replace(/[tT]ransform/,"TransformOrigin"),"T"==f[0]&&(f[0]="t"));eval('IE = "v"=="\v"');jQuery.fn.extend({rotate:function(a){if(0!==this.length&&"undefined"!=typeof a){"number"==typeof a&&(a={angle:a});for(var b=[],c=0,d=this.length;c<d;c++){var e=this.get(c);if(e.Wilq32&&e.Wilq32.PhotoEffect)e.Wilq32.PhotoEffect._handleRotation(a);
else{var f=k.extend(!0,{},a),e=(new Wilq32.PhotoEffect(e,f))._rootObj;b.push(k(e))}}return b}},getRotateAngle:function(){for(var a=[],b=0,c=this.length;b<c;b++){var d=this.get(b);d.Wilq32&&d.Wilq32.PhotoEffect&&(a[b]=d.Wilq32.PhotoEffect._angle)}return a},stopRotate:function(){for(var a=0,b=this.length;a<b;a++){var c=this.get(a);c.Wilq32&&c.Wilq32.PhotoEffect&&clearTimeout(c.Wilq32.PhotoEffect._timer)}}});Wilq32=window.Wilq32||{};Wilq32.PhotoEffect=function(){return d?function(a,b){a.Wilq32={PhotoEffect:this};
    this._img=this._rootObj=this._eventObj=a;this._handleRotation(b)}:function(a,b){this._img=a;this._onLoadDelegate=[b];this._rootObj=document.createElement("span");this._rootObj.style.display="inline-block";this._rootObj.Wilq32={PhotoEffect:this};a.parentNode.insertBefore(this._rootObj,a);if(a.complete)this._Loader();else{var c=this;jQuery(this._img).bind("load",function(){c._Loader()})}}}();Wilq32.PhotoEffect.prototype={_setupParameters:function(a){this._parameters=this._parameters||{};"number"!==
typeof this._angle&&(this._angle=0);"number"===typeof a.angle&&(this._angle=a.angle);this._parameters.animateTo="number"===typeof a.animateTo?a.animateTo:this._angle;this._parameters.step=a.step||this._parameters.step||null;this._parameters.easing=a.easing||this._parameters.easing||this._defaultEasing;this._parameters.duration=a.duration||this._parameters.duration||1E3;this._parameters.callback=a.callback||this._parameters.callback||this._emptyFunction;this._parameters.center=a.center||this._parameters.center||
    ["50%","50%"];this._rotationCenterX="string"==typeof this._parameters.center[0]?parseInt(this._parameters.center[0],10)/100*this._imgWidth*this._aspectW:this._parameters.center[0];this._rotationCenterY="string"==typeof this._parameters.center[1]?parseInt(this._parameters.center[1],10)/100*this._imgHeight*this._aspectH:this._parameters.center[1];a.bind&&a.bind!=this._parameters.bind&&this._BindEvents(a.bind)},_emptyFunction:function(){},_defaultEasing:function(a,b,c,d,e){return-d*((b=b/e-1)*b*b*b-
    1)+c},_handleRotation:function(a,b){d||this._img.complete||b?(this._setupParameters(a),this._angle==this._parameters.animateTo?this._rotate(this._angle):this._animateStart()):this._onLoadDelegate.push(a)},_BindEvents:function(a){if(a&&this._eventObj){if(this._parameters.bind){var b=this._parameters.bind,c;for(c in b)b.hasOwnProperty(c)&&jQuery(this._eventObj).unbind(c,b[c])}this._parameters.bind=a;for(c in a)a.hasOwnProperty(c)&&jQuery(this._eventObj).bind(c,a[c])}},_Loader:function(){return IE?function(){var a=
    this._img.width,b=this._img.height;this._imgWidth=a;this._imgHeight=b;this._img.parentNode.removeChild(this._img);this._vimage=this.createVMLNode("image");this._vimage.src=this._img.src;this._vimage.style.height=b+"px";this._vimage.style.width=a+"px";this._vimage.style.position="absolute";this._vimage.style.top="0px";this._vimage.style.left="0px";this._aspectW=this._aspectH=1;this._container=this.createVMLNode("group");this._container.style.width=a;this._container.style.height=b;this._container.style.position=
    "absolute";this._container.style.top="0px";this._container.style.left="0px";this._container.setAttribute("coordsize",a-1+","+(b-1));this._container.appendChild(this._vimage);this._rootObj.appendChild(this._container);this._rootObj.style.position="relative";this._rootObj.style.width=a+"px";this._rootObj.style.height=b+"px";this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;for(this._eventObj=this._rootObj;a=this._onLoadDelegate.shift();)this._handleRotation(a,
    !0)}:function(){this._rootObj.setAttribute("id",this._img.getAttribute("id"));this._rootObj.className=this._img.className;this._imgWidth=this._img.naturalWidth;this._imgHeight=this._img.naturalHeight;var a=Math.sqrt(this._imgHeight*this._imgHeight+this._imgWidth*this._imgWidth);this._width=3*a;this._height=3*a;this._aspectW=this._img.offsetWidth/this._img.naturalWidth;this._aspectH=this._img.offsetHeight/this._img.naturalHeight;this._img.parentNode.removeChild(this._img);this._canvas=document.createElement("canvas");
    this._canvas.setAttribute("width",this._width);this._canvas.style.position="relative";this._canvas.style.left=-this._img.height*this._aspectW+"px";this._canvas.style.top=-this._img.width*this._aspectH+"px";this._canvas.Wilq32=this._rootObj.Wilq32;this._rootObj.appendChild(this._canvas);this._rootObj.style.width=this._img.width*this._aspectW+"px";this._rootObj.style.height=this._img.height*this._aspectH+"px";this._eventObj=this._canvas;for(this._cnv=this._canvas.getContext("2d");a=this._onLoadDelegate.shift();)this._handleRotation(a,
        !0)}}(),_animateStart:function(){this._timer&&clearTimeout(this._timer);this._animateStartTime=+new Date;this._animateStartAngle=this._angle;this._animate()},_animate:function(){var a=+new Date,b=a-this._animateStartTime>this._parameters.duration;if(b&&!this._parameters.animatedGif)clearTimeout(this._timer);else{if(this._canvas||this._vimage||this._img)a=this._parameters.easing(0,a-this._animateStartTime,this._animateStartAngle,this._parameters.animateTo-this._animateStartAngle,this._parameters.duration),
    this._rotate(~~(10*a)/10);this._parameters.step&&this._parameters.step(this._angle);var c=this;this._timer=setTimeout(function(){c._animate.call(c)},10)}this._parameters.callback&&b&&(this._angle=this._parameters.animateTo,this._rotate(this._angle),this._parameters.callback.call(this._rootObj))},_rotate:function(){var a=Math.PI/180;return IE?function(a){this._angle=a;this._container.style.rotation=a%360+"deg";this._vimage.style.top=-(this._rotationCenterY-this._imgHeight/2)+"px";this._vimage.style.left=
    -(this._rotationCenterX-this._imgWidth/2)+"px";this._container.style.top=this._rotationCenterY-this._imgHeight/2+"px";this._container.style.left=this._rotationCenterX-this._imgWidth/2+"px"}:d?function(a){this._angle=a;this._img.style[d]="rotate("+a%360+"deg)";this._img.style[f]=this._parameters.center.join(" ")}:function(b){this._angle=b;b=b%360*a;this._canvas.width=this._width;this._canvas.height=this._height;this._cnv.translate(this._imgWidth*this._aspectW,this._imgHeight*this._aspectH);this._cnv.translate(this._rotationCenterX,
    this._rotationCenterY);this._cnv.rotate(b);this._cnv.translate(-this._rotationCenterX,-this._rotationCenterY);this._cnv.scale(this._aspectW,this._aspectH);this._cnv.drawImage(this._img,0,0)}}()};IE&&(Wilq32.PhotoEffect.prototype.createVMLNode=function(){document.createStyleSheet().addRule(".rvml","behavior:url(#default#VML)");try{return!document.namespaces.rvml&&document.namespaces.add("rvml","urn:schemas-microsoft-com:vml"),function(a){return document.createElement("<rvml:"+a+' class="rvml">')}}catch(a){return function(a){return document.createElement("<"+
    a+' xmlns="urn:schemas-microsoft.com:vml" class="rvml">')}}}())})(jQuery);