最简单的JS图片轮显-实现代码

关注

转载最新推荐文章于 2026-03-23 00:07:57 发布 3k 阅读 AI 写同款· GEO 优化 ›

原生Js实现自动无缝轮播图 javascript实现自动无缝轮播图 1、实现原理轮播图实现原理是用一个大盒子组容器，里面包含一个小盒子，小盒子用来移动，小盒子里装着要轮播的图片，图片水平排放，当小盒子移动的时候带动图片一起移动，要想实现无缝轮播，则要在最后放一张与第一张一摸一样的图片，当图片滚动到最后一张时，用户会感觉这是第一张，然后再跳到第一张，这样用户就不会感觉图片是跳过去的，实现无缝轮播 2、实现效果（图片上传有大小限制，这里就展示一部分。。。） 3、代码展示 3.1 网页结构布局（html代码） <!DOCTYPE 阅读详情

Jquery版

function img_z(id1,id2,id3){   var speed=15//速度数值越大速度越慢   var AAA=$(id1);   var BBB=$(id2);   var CCC=$(id3);   AAA.html(BBB.html());   function Marquee(){    if(AAA[0].offsetWidth-CCC[0].scrollLeft<=0)     CCC[0].scrollLeft-=BBB[0].offsetWidth    else{     CCC[0].scrollLeft++;    }   }   var MyMar=setInterval(Marquee,speed);   CCC.mouseover(function() {clearInterval(MyMar)});   CCC.mouseout(function() {MyMar=setInterval(Marquee,speed)}); }

Js版

var speed=14; //数字越大速度越慢 var tab=document.getElementByIdx("runot"); var tab1=document.getElementByIdx("demo1"); var tab2=document.getElementByIdx("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

收录于