轮播组件实现自动翻页及鼠标悬停效果

本帖最后由 土豆我是马铃薯 于 2019-7-31 13:57 编辑

在客户项目中，遇到这样一个需求:【1】实现轮播组件自动翻页
【2】当鼠标移至当前页面时，页面暂停翻页效果


此效果可使用脚本实现，具体脚本内容如下：
//HHH248是组件所在容器代号，HHH249是轮播组件代号
//---------参数配置start---------
//第一个参数是控件id
//第二个参数是轮播间隙时间单位是ms
var autoslide = setInterval(function(){
autoShowSlide('HHH249', 5000);
},3000);
//-------end----------

setInterval(function(){

if(!$("#HHH248").data("events")){
$("#HHH248").mouseover(function(){
if(autoslide){
window.clearInterval(autoslide);
autoslide = null;
}
});
}else{
if(!$("#HHH248").data("events")["mouseenter"]){
$("#HHH248").mouseover(function(){
if(autoslide){
window.clearInterval(autoslide);
autoslide = null;
}
});
}
}

},5000);

setInterval(function(){

if(!$("#HHH248").data("events")){
$("#HHH248").mouseout(function(){
if(!autoslide){
autoslide = setInterval(function(){
autoShowSlide('HHH249', 5000);
},3000);
}
});
}else{
if(!$("#HHH248").data("events")["mouseleave"]){
$("#HHH248").mouseout(function(){
if(!autoslide){
autoslide = setInterval(function(){
autoShowSlide('HHH249', 5000);
},5000);
}
});
}
}

},5000);


function autoShowSlide(block, time) {
var slide = g_rptpage.getWidgetByName(block);
if(!slide){
return ;
}
var gocount = slide.getGocount();//步数
//var pagesize = slide.getPagesize();
//var active = slide.getActive();

//暂时只考虑一次翻一页的情况
if (gocount == 1) {
//有子页面且子页面大于1页
var slidelist = slide.slidelist;
if (slidelist != null && slidelist.getSubCount() > 1){
if (slidelist.getActiveIndex() == slidelist.getSubCount() - 1) {
//最后一页调回第一页
//slidelist.setActivePage(0);
slide.setActive(0);
} else {
//slidelist.setActivePage(slidelist.getActiveIndex() + 1);
slide.setActive(slidelist.getActiveIndex() + 1);
}
}
}
}


附上脚本文本及实例给大家~

轮播组件自动翻页脚本实现.zip (6.41 KB, 下载次数: )

2019-7-31 11:25 上传

点击文件名下载附件