带登陆框的jQuery满屏幻灯片

最新推荐文章于 2025-07-24 16:48:04 发布

amohan

最新推荐文章于 2025-07-24 16:48:04 发布

阅读量148

点赞数

CC 4.0 BY-SA版权

分类专栏：网站模版文章标签： jquery 前端 javascript

原文链接：https://yy123.ink/frontDetail/12345

网站模版专栏收录该内容

3170 篇文章

订阅专栏

该博客详细介绍了如何使用JavaScript实现一个具有淡入淡出、左右按钮控制、自动播放和用户登录框功能的幻灯片组件。通过创建和操作DOM元素，设置定时器以及处理鼠标事件，实现了图片轮播的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址

一款三张背景图淡入淡出切换，带左右按钮，带小按钮，自动播放，幻灯片上面还带有一个用户登录框。/***********幻灯*****************/auto=null;timer=null;var focus=new Function();focus.prototype={ init:function(){ //默认动画频率 this.aTime=this.aTime || 10; //默认间隔 this.sTime=this.sTime || 5000; //图片容器 this.oImg=document.getElementById("focus_m").getElementsByTagName("ul")[0]; this.oImgLi=this.oImg.getElementsByTagName("li"); //左右按钮 this.oL=document.getElementById("focus_l"); this.oR=document.getElementById("focus_r"); //创建文字容器 this.TextDom(); //默认第一帧 this.target=0; //开始动画 this.autoMove(); //鼠标 this.oAction(); }, TextDom:function(){ var that=this; //创建文字容器 this.oText=document.Element("div"); this.oText.className="focus_s"; var ul=document.Element("ul"); var frag=document.DocumentFragment(); for (var i=0;i" ;="" if="" (i="=0)" li.classname="active" };="" frag.appendchild(li);="" ul.appendchild(frag);="" this.otext.appendchild(ul);="" this.o.insertbefore(this.otext,this.o.firstchild);="" 文字容器绑定动作="" this.otextli="this.oText.getElementsByTagName("li");" },="" automove:function(){="" that="this;" auto="setInterval(function(){that.goNext()},that.sTime);" gonext:function()="" this.target="this.nowIndex();" ?="" this.astep="(this.target-this.nowIndex())*this.step;" this.removeclassname();="" this.otextli[this.target].classname="active" this.startmove();="" goprev:function()="" :="" this.target--;="" startmove:function="" (){="" t="0;" this.timer="" function="" set(){="" (t="">100) { clearInterval(that.timer); }else { for (var i=0;i=w) { clearInterval(marqueeTime); var t1=document.Element("li"); var t2=o.getElementsByTagName("li")[0]; t1.innerHTML=t2.innerHTML; o.appendChild(t1); o.removeChild(t2); o.style.marginLeft=0; }else { o.style.marginLeft="-"+tt+"px"; tt+=Math.ceil((w-tt)*0.1); }; }else { if (tt<=0) { clearInterval(marqueeTime); o.style.marginLeft=0; }else { o.style.marginLeft="-"+tt+"px"; tt=Math.floor(0.9*tt); }; } }; marqueeTime=setInterval(set,aTime); }; if (li.length<7) { l.style.display=r.style.display="none" }else { r.onclick=function(){ goNext(); }; l.onclick=function(){ goPrev(); }; };};window.onload=function(){ focusRun.init(); marquee();};;i++)>;i++)>

dd: