js滑动轮播效果

作者:白雪 | 创建时间: 2023-07-23
js+Jquery实现图片轮播...
js滑动轮播效果

操作方法

var timeid;//定义变量存储计时器id var index = 0;//计数

function lun(ids, times, tims_l, a_sp, xWidth) {//id/类,首次加载延时轮播时间,循环时间,动画速度,图层宽度 var i = $(ids + " ul li").length;//具体看自己是使用什么标签 timeid = setTimeout("lunbo(" + i + ",'" + ids + " ul'," + tims_l + "," + xWidth + "," + a_sp + ")", times); //lunbo(轮播数,需要轮播的ul,间隔时间);//首次加载页面轮间隔时间后开始轮播 }

function lunbo(i, obj, time_jg, xWidth, a_sp) { $(obj).animate({ marginLeft: '-=' + xWidth + 'px' }, a_sp); index += 1; if (index >= i - 1) { index = 0; $(obj).animate({ marginLeft: '+=' + xWidth * (i - 1) + 'px' }, 1); } timeid = setTimeout("lunbo(" + i + ",'" + obj + "'," + time_jg + "," + xWidth + "," + a_sp + ")", a_sp + time_jg); }

window.onload = function () { lun(".lun_ul", 3000, 3000, 3000, 450); //图片轮播所使用的唯一类、ID,首次触发轮播延时,没两张轮播图间隔时间,每次滑动图片所需时间,图片宽度 }

温馨提示

图片轮播第一张图与最后一张图保持一致,使轮播效果更连贯
点击展开全文

更多推荐