Jquery封装幻灯片效果

2025-02-12 技术教程

前几天在我同事博客里面看到一篇幻灯片所以觉得用Jqeury写幻灯片也并不是很难就是和我在博客里面的tab自动切换的原理是一模一样的只是形式不同而已！所以今天也写了一个常见的幻灯片效果用Jquery写的很简单也是用我上次tab自动切换的js 所以原理没有什么可说的不懂的可以看看上次写的TAB自动切换代码：下面的一张截图：

就是类似这种幻灯片：

下面是HTML结构和CSS样式

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>无标题文档</title><style>.Marquee{width:490px;margin:50pxauto0;overflow:hidden;} body,div,ul,li{margin:0;padding:0;} ul,li{list-style:none;} img{display:block;border:none;} .content-main{width:490px;height:170px;overflow:hidden;} .content{width:490px;height:170px;overflow:hidden;} .hide{display:none;} .menu{width:490px;height:22px;overflow:hidden;background:#966;} .menuli{width:160px;height:22px;overflow:hidden;float:left;line-height:22px;text-align:center;} .menuli.last-col{width:170px;height:22px;overflow:hidden;} .current{background:#F00;} .contenta{width:490px;height:170px;overflow:hidden;display:block;} </style><scripttype="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <scriptsrc="autoTab.js"></script></head><body><divid="Marquee"class="Marquee"> <divclass="content-main"><divclass="content"><ahref="#"target="_blank"><imgsrc="p_w_picpaths/1.jpg"/></a></div><divclass="contenthide"><ahref="#"target="_blank"><imgsrc="p_w_picpaths/2.jpg"/></a></div><divclass="contenthide"><ahref="#"target="_blank"><imgsrc="p_w_picpaths/3.jpg"/></a></div></div><ulclass="menu"><liclass="current">tab1</li><li>tab2</li><liclass="last-col">tab3</li></ul></div> <scripttype="text/javascript">newtabMarquee("#Marquee",3); </script></body></html>

JS代码如下:

//JavaScriptDocument functiontabMarquee(obj,count){ _this=this; _this.obj=obj; _this.count=count; _this.time=3000;//停留的时间 _this.n=0; vart; this.slider=function(){ $(_this.obj+".menuli").bind("mouseover",function(event){ $(event.target).addClass("current").siblings().removeClass("current"); varindex=$(_this.obj+".menuli").index(this); $(_this.obj+".content-main.content").eq(index).show().siblings().hide(); _this.n=index; }) } this.addHover=function(){ $(_this.obj).hover(function(){ clearInterval(t); },function(){ t=setInterval(_this.autoPlay,_this.time); }) } this.autoPlay=function(){ _this.n=_this.n>=(_this.count-1)?0:++_this.n; $(_this.obj+".menuli").eq(_this.n).trigger("mouseover"); } this.factory=function(){ this.slider(); this.addHover(); t=setInterval(this.autoPlay,_this.time); } this.factory(); }

下面传个附件看不懂可以下载下来先看看效果然后稍微理解下就ok了！其实说真的js重要但是HTML结构和CSS样式同样重要有时结构写好的话 css写好的话 js就很简单！！

附件：http://down.51cto.com/data/2359366