使用教程
首先引用js文件
<script src="jquery.min.js"></script>
<script src="rotaryDraw.js"></script>
HTML结构很简单
<div class="box">
<img src="images/img_01.png" class="img01" alt="">
<img src="images/img_03.png" class="drawBtn">
</div>
<div class="box1">
<img src="images/img_02.png" class="img01" alt="">
<img src="images/img_03.png" class="drawBtn2">
</div>
下面是CSS样式
.box{
position:relative;
max-width:750px;
margin:0 auto;
}
.box .img01{
width:100%;
}
.box .drawBtn{
position:absolute;
width:10rem;
height:auto;
left:50%;
margin-left:-5rem;
}
.box1{
position:relative;
max-width:750px;
margin:0 auto;
}
.box1 .img01{
width:100%;
}
.box1 .drawBtn2{
position:absolute;
width:10rem;
height:auto;
left:50%;
margin-left:-5rem;
}
最后调用
function callbackA(ind)
{
alert("第一个回调"+ind);
};
function callbackB(ind)
{
alert("第二个回调"+ind);
};
var newdraw =new turntableDraw('.drawBtn',{
share:8,
speed:"3s",
velocityCurve:"ease",
weeks:6,
callback:function(num)
{
callbackA(num);
},
});
var newdraw2 =new turntableDraw('.drawBtn2',{
share:12,
speed:"3s",
velocityCurve:"ease",
weeks:6,
callback:function(num)
{
callbackB(num);
},
});
$(".drawBtn").click(function(event) {
//ajax
newdraw.goto(parseInt(Math.random()*8)+1);
});
$(".drawBtn2").click(function(event) {
//ajax
newdraw2.goto(parseInt(Math.random()*12)+1);
});