研究了下jquery幻灯片，带左右按钮，渐隐渐显，自动播放 这个效果 HTML代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> body{ margin:0; padding:0;} img{ border:none;} .XYMarquee{ width:800px; height:600px; overflow:hidden; margin:0px auto 0; position:relative;} .XYMarquee .banner{ position:absolute; left:0; top:0; z-index:10; display:none;} .prev{ padding:37px; position:absolute; z-index:20; left:5px; top:300px; font-size:45px; cursor:pointer;} .next{ padding:37px; position:absolute; z-index:20; left:685px; top:300px; font-size:45px; cursor:pointer;} </style> <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> </head> <body> <div class="XYMarquee"> <a href="#" target="_blank" title="1"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/1.jpg" width="800" height="600" class="banner"/></a> <a href="#" target="_blank" title="2"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/2.JPG" width="800" height="600" class="banner"/></a> <a href="#" target="_blank" title="3"><img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/4.jpg" width="800" height="600" class="banner"/></a> <div class="prev"><</div> <div class="next">></div> </div> <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="index.js"></script> <script> $(document).ready(function () { $(".banner:first").show(); }); </script> </body> </html>在这个HTML代码中要注意几个问题
第一 滚动的图片外层要设置成相对定位或者绝对定位！否则滚动不了！
第二 所有的图片在样式里面 我用了display：none 一定要用这个 否则的话 会有问题 滚动的时候 第一张播放完后 第二张就迅速的播放 这样就会有问题！
JS代码：
// JavaScript Document function setTab(IClass,WClass,time,prev,next){ self.o = 0;//初始化位置 self.Banner = $(IClass); self.bannerFirst = $(IClass+":first"); self.XYMarquee = $(WClass); self.Prev = $(prev); self.Next = $(next); self.time = time; } setTab.prototype ={ init : function(){ var self = this; self.auto(); self.Prev(); self.Next(); self.hover(); }, auto : function(){ self.mytime = setInterval(function(){ pub(); },self.time) }, hover : function(){ self.XYMarquee.hover(function(){ if(self.mytime){ clearInterval(self.mytime);} },function(){ self.mytime = setInterval(function(){ pub(); },self.time); }); }, Prev : function(){ self.Prev.click(function(){ self.o--; if(self.o==-4){self.o=-1;} var len = self.Banner.length; self.Banner.fadeOut(); self.Banner.eq(self.o).fadeIn(); }); }, Next : function(){ self.Next.click(function(){ pub(); }); } } function pub(){ self.o++; var len = self.Banner.length; self.Banner.fadeOut(); self.Banner.eq(self.o).fadeIn(); if(self.o==len){ self.o = 0; self.bannerFirst.fadeIn(); //解决播放后，回到第一张时会不显示图片的BUG } } var newSetTab=new setTab(".banner",".XYMarquee","3000",".prev",".next"); newSetTab.init();当然JS用了javascript面向对象编程来封装的js js代码并不难 关键就是结构写好的话 样式写好的话 js不怎么难 下面有附件 可以下载看看 OK！就这样吧 可以多看看代码就能理解了 现在俺正听着“筷子兄弟-好男孩”这首歌 也没有什么话说 思维就乱了！呵呵！！这首歌个人觉得蛮好听的 有空大家可以试试听 嘿嘿！！！觉得这首歌正写的是我呢 ！！哈哈
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦