多语言展示
当前在线:1954今日阅读:39今日分享:10

js滑动轮播效果

js+Jquery实现图片轮播
工具/原料

HTML编辑器

方法/步骤
1

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

2

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,间隔时间);//首次加载页面轮间隔时间后开始轮播        }

3

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);        }

4

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

注意事项

图片轮播第一张图与最后一张图保持一致,使轮播效果更连贯

推荐信息