我用MUI的mui('.mui-slider')实现了,类型 驾考宝典 上面切换题目效果。现在有个问题,就是想实现,比如,我切换到下一题的时候,位置 能不随上一题的位置变化,而变化。截图:
范
- 发布:2017-02-13 15:19
- 更新:2017-03-02 16:40
- 阅读:1369
slider控件实现 驾考宝典 翻题效果
分类:MUI
范 (作者)
代码贴下,第一步:slide初始化
gallery = mui('.mui-slider');
gallery.slider({
interval: 0 //自动轮播周期,若为0则不自动播放,默认为0;
});
第二步:图片切换代码
//图片切换时,触发动画
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//scrollTo(0, 0, 0);**原来打算用这个,不过有一个 滚动的效果,不是想要的。我想要的是,下一题出现一点的时候,位置就自动到上面了,就像“驾考宝典”里面的下一题效果**
// mui('.mui-slider').scroll().scrollTo(0, 0, 100); //在100毫秒内回到头部
//console.log("_quesionBoxObj.style:" + _quesionBoxObj.style.cssText);
//event.detail.slideNumber = 1;
zhizhang.style.color = '';
zhizhang02.style.color = '';
var index = event.detail.slideNumber + 1;
//document.getElementById('dd').innerHTML = event.detail.slideNumber;
//return;
if(index > _temp) {
//"左";
//document.getElementById('dd').innerHTML = '左';
//alert('_cur' + _cur);
if(_isSlideBySwitch) {
setCur(_cur);
_isSlideBySwitch = false;
} else {
setCur(_cur + 1);
}
var cur = _cur + 1;
// document.getElementById('slide_'+cur).scrollTo(0,0,0);
LoadHelper();
} else {
//"右";
//document.getElementById('dd').innerHTML = '右';
if(_isSlideBySwitch) {
setCur(_cur);
_isSlideBySwitch = false;
} else {
setCur(_cur - 1);
}
LoadHelper();
}
_temp = index;
mui("#slide_" + _cur).on("tap", "img", function(e) {
ImageShow(_cur, this.id);
});
//scrollTo(0, 0, 0);
//console.log(".mui-fullscreen" + document.querySelector('#slider').offsetTop);
});