轮播图

    科技2022-07-12  130

            $(function () {             轮播图             var index = 0;             var timeId;             获取图片滚动的高度             var height = $(".ad").height();             页面加载完毕让其下标为1的li高亮显示             $(".num li:first").addClass("on");             当鼠标移动到li元素上时,当前li元素高亮显示             $(".num li").mouseover(function () {                 获取当前鼠标放入的li元素所在的索引位置                 index = $(".num li").index($(this));                 执行滚动方法,传index进来就是当用户滑到第几张的时候就显示第几张                 showImg(index);             });             当鼠标放入图片上时,停止滚动(清除定时器),鼠标离开,开始滚动(启动定时器)             $(".ad").hover(function () {                 清除定时器                 clearInterval(timeId);             }, function () {                 启动定时器                 timeId = setInterval(function () {                     index++;                     if (index == 5) {                         index = 0;                     }                     showImg(index);                 }, 2000);             }).trigger("mouseout");             function showImg(index) {                 获取图片滚动高度                 var height = $(".ad").height();                 根据当前索引使图片移动到对应的距离高度                 $(".slider").animate({ top: -index * height }, 1000);                 $(".num li").eq(index).addClass("on").siblings().removeClass("on");             };                  });

    Processed: 0.014, SQL: 8