最近自己制作了一个五图切换的JS幻灯片代码，带背景半透明的小缩略图，是基于Jquery制作的，代码非常简练。你如果去别的行业网站上下载的JS幻灯片代码，你会发现代码非常繁琐，那你不如用我写的这个，效果相同，代码简练，值得使用！写这个代码用了3个小时，请大家珍惜哟~~!
这里是演示地址：http://www.viming.com/preview/101.html
废话不多说，下面贴出基于Jquery的五图切换的JS幻灯片代码，Jquery要使用1.4.2以上版本：
| 以下是引用片段： <style type="text/css"> #bigslide{width:532px; height:318px; overflow:hidden; position:relative; z-index:5} #bigslide .imgs{width:532px; height:318px; overflow:hidden; position:absolute; z-index:6} #bigslide .imgs div{width:5320px; height:318px; overflow:hidden} #bigslide .imgs a{display:block; margin:0; padding:0; float:left} #bigslide .bgr{width:532px; height:70px; position:absolute; z-index:7; bottom:0; background-color:#000; opacity:.5; -moz-opacity:.5; filter:alpha(opacity=50)} #bigslide .hovers{width:516px; _width:533px; height:70px; padding-left:16px; overflow:hidden; position:absolute; z-index:8; bottom:0} #bigslide .hovers a{display:block; margin:8px 15px 0 0; padding:0; width:88px; height:54px; float:left} #bigslide .hovers img{border:2px #fff solid; opacity:.7; -moz-opacity:.7; filter:alpha(opacity=70)} #bigslide .hovers a:hover img, #bigslide .hovers a.d img{opacity:1; -moz-opacity:1; filter:alpha(opacity=100)} </style> <script type="text/javascript" src="http://www.viming.com/webinc/jquery.js"></script> <div id="bigslide"> <div class="imgs"><div> <a href="http://www.viming.com/caseshow_1.html" target="_blank"><img src="/oledit/UploadFile/201181916940184.jpg" alt="北京巨腾科技有限公司" width="532" height="318" border="0" /></a> <a href="http://www.viming.com/caseshow_37.html" target="_blank"><img src="/oledit/UploadFile/201181916941518.jpg" alt="河北博润房地产开发公司" width="532" height="318" border="0" /></a> <a href="http://www.viming.com/caseshow_42.html" target="_blank"><img src="/oledit/UploadFile/201181916941376.jpg" alt="石家庄景瑞广告装饰公司" width="532" height="318" border="0" /></a> <a href="http://www.viming.com/caseshow_43.html" target="_blank"><img src="/oledit/UploadFile/201181916941846.jpg" alt="莱德服饰贸易有限公司" width="532" height="318" border="0" /></a> <a href="http://www.viming.com/caseshow_44.html" target="_blank"><img src="/oledit/UploadFile/201181916941665.jpg" alt="秦宁企业管理咨询机构" width="532" height="318" border="0" /></a> </div></div> <div class="bgr"></div> <div class="hovers"> <a href="http://www.viming.com/caseshow_1.html" target="_blank" class="d"><img src="/oledit/UploadFile/201181916940184.jpg" alt="北京巨腾科技有限公司" width="84" height="50" border="0" /></a> <a href="http://www.viming.com/caseshow_37.html" target="_blank"><img src="/oledit/UploadFile/201181916941518.jpg" alt="河北博润房地产开发公司" width="84" height="50" border="0" /></a> <a href="http://www.viming.com/caseshow_42.html" target="_blank"><img src="/oledit/UploadFile/201181916941376.jpg" alt="石家庄景瑞广告装饰公司" width="84" height="50" border="0" /></a> <a href="http://www.viming.com/caseshow_43.html" target="_blank"><img src="/oledit/UploadFile/201181916941846.jpg" alt="莱德服饰贸易有限公司" width="84" height="50" border="0" /></a> <a href="http://www.viming.com/caseshow_44.html" target="_blank"><img src="/oledit/UploadFile/201181916941665.jpg" alt="秦宁企业管理咨询机构" width="84" height="50" border="0" /></a> </div> </div> <script type="text/javascript"> //大图幻灯 function bigslidemoving(){ var box=$("#bigslide .imgs"); //区块 var mins=$("#bigslide .hovers"); //小图 var speed=4000; //间隔时间 var allnum=$(box).find("a").length; var barw=$(box).find("a").width(); var slidemoveset, movekey=true; slidemovefun=function(n){ if(n>=allnum){n=0;} $(mins).find("a.d").removeClass("d"); $(mins).find("a").eq(n).addClass("d"); $(box).stop(true).animate({scrollLeft:barw*n},500); if(movekey){slidemoveset=setTimeout("slidemovefun("+(n+1)+")",speed);} }; $(mins).find("a").hover( function(){movekey=false; clearTimeout(slidemoveset); slidemovefun($(this).index());}, function(){movekey=true; clearTimeout(slidemoveset); slidemoveset=setTimeout("slidemovefun("+($(this).index()+1)+")",speed);} ); if(allnum>1){slidemoveset=setTimeout("slidemovefun(1)",speed);} } bigslidemoving();//调用 </script> |
