使用jQuery制作图片轮播效果.pdfVIP

使用jQuery制作图片轮播效果 在DW 中插入一个图片，然后回车 重复步骤1直到所有图片添加完成 选择所有图片，格式菜单－〉列表－〉项目列表，制作一个图片列表 然后再插入一个div，id命名为 “LunBoNum”，在div 内写入代码如下： spanclass=CurrentNum1/span span2/span span3/span span4/span span5/span 插入一个新id为 “LunBo”的div，并包含如上全部内容，代码如下： divclass=LunBo ul liclass=CurrentPicimgsrc=images/1.pngwidth=490height=170/li liimgsrc=images/2.jpgwidth=490height=170/li liimgsrc=images/3.jpgwidth=490height=170/li liimgsrc=images/4.jpgwidth=490height=170/li liimgsrc=images/5.pngwidth=490height=170/li /ul divclass=LunBoNum spanclass=CurrentNum1/span span2/span span3/span span4/span span5/span /div /div 在网页的head/head 代码间加入 jQuery 框架链接script type=text/javascript src=/jquery-1.7.1.min.js/script 编写JS代码如下 scripttype=text/javascriptlanguage=javascript varPicTotal=5;// 当前图片总数 varCurrentIndex;// 当前鼠标点击图片索引 varToDisplayPicNumber=0;// 自动播放时的图片索引 $(div.LunBodiv.LunBoNumspan).click(DisplayPic); functionDisplayPic() { // 测试是父亲的第几个儿子 CurrentIndex=$(this).index(); // 删除所有同级兄弟的类属性 $(this).parent().children().removeClass(CurrentNum) // 为当前元素添加类 $(this).addClass(CurrentNum); // 隐藏全部图片 varPic=$(this).parent().parent().children(ul); $(Pic).children().hide(); // 显示指定图片 $(Pic).children(li).eq(CurrentIndex).show(); } functionPicNumClick() { $(div.LunBodiv.LunBoNumspan).eq(ToDisplayPicNumber).trigger(click); ToDisplayPicNumber=(ToDisplayPicNumber+ 1)%PicTotal; setTimeout(PicNumClick(),1000); } setTimeout(PicNumClick(),1000); /script 链接CSS文件，文件内容如下 *{ margin:0px; padding:0px; font-size:14px; } div.LunBo { position:relative; list-style-type:none; height: 170px; width:490px; } div.LunBoulli { position:absolute; height: 170px; width:490px; left:0px; top:0px; display:none; } div.LunBoulli.CurrentPic { display:block; } div.LunBodiv.LunBoNum { position:absolute; left:374px; bottom: 11px; width:83px; text-align:right; background-color:#999; padding-left: 10px; } div.LunBodiv.LunBoNumspan{ height:20px; width: 15px; display:blo