网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：18345199。[点此获取更多QQ群]
今天创想工作室给大家分享一款漂亮、切换流畅的JS焦点图，是本人在招商银行网站上看到的，看了一下代码，可以很轻松的进行拓展：图片切换的数量、图片大小等，总之很不错的一款JS焦点图特效代码！
代码如下：
CSS样式代码如下：
代码如下：
| <div id="focus"> | |
| <div id="SlidePlayer"> | |
| <ul class="Slides" id="Slides"> | |
| <li><a href="http://www.smezc.com" target="_blank" cname="主广告位" oname="香港安诚商务有限公司祝新老客户春节快乐！" otype="图片链接"> <img title="香港安诚商务有限公司祝新老客户春节快乐！" src="http://www.22ba.com/uploadfile/2013/0311/20130311055008253.jpg" /></a></li> | |
| <li><a href="http://www.smezc.com" target="_blank" cname="主广告位" oname="2013年注册英国公司优惠" otype="图片链接"><img title="2013年注册英国公司优惠" src="http://www.22ba.com/uploadfile/2013/0311/20130311055009674.jpg" /></a></li> | |
| <li><a href="http://www.smezc.com" target="_blank" cname="主广告位" oname="2013年注册香港公司优惠" otype="图片链接"> <img title="2013年注册香港公司优惠" src="http://www.22ba.com/uploadfile/2013/0311/20130311055009358.jpg" /></a></li> | |
| <li><a href="http://www.smezc.com" target="_blank" cname="主广告位" oname="律师公证" otype="图片链接"><img title="律师公证" src="http://www.22ba.com/uploadfile/2013/0311/20130311055009355.jpg" /></a></li> | |
| <li><a href="http://www.smezc.com" target="_blank" cname="主广告位" oname="香港安诚商务有限公司竭诚为君服务！" otype="图片链接"><img title="香港安诚商务有限公司竭诚为君服务！" src="http://www.22ba.com/uploadfile/2013/0311/20130311055009575.jpg" /></a></li> | |
| </ul> | |
| <ul class="SlideTriggers" id="SlideTriggers" style="display:block"> | |
| <li class="current">1</li> | |
| <li class="">2</li> | |
| <li class="">3</li> | |
| <li class="">4</li> | |
| <li class="">5</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script src="/js/focus.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| // SlidePlayerShow = function(parm) { | |
| // function Each(list, fun) { | |
| // for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } | |
| // }; | |
| // var Nums = $("SlideTriggers").getElementsByTagName("li"); | |
| // parm = parm.replace("px", ""); | |
| // var tv2 = new TransformView("SlidePlayer", "Slides", parm, Nums.length, { | |
| // onStart: function() { Each(Nums, function(o, i) { o.className = tv2.Index == i ? "current" : ""; }) }, //按钮样式 | |
| // Up: true | |
| // }); | |
| // tv2.Start(); | |
| // $("Slides").onmouseover = function() { | |
| // tv2.Stop(); | |
| // } | |
| // $("Slides").onmouseout = function() { | |
| // tv2.Start(); | |
| // } | |
| // Each(Nums, function(o, i) { | |
| // o.onmouseover = function() { | |
| // o.className = "current"; | |
| // tv2.Auto = false; | |
| // tv2.Index = i; | |
| // } | |
| // o.onmouseout = function() { | |
| // o.className = ""; | |
| // tv2.Auto = true; | |
| // tv2.Start(); | |
| // } | |
| // }) | |
| // } | |
| //var height = "185px"; | |
| //SlidePlayerShow(height); | |
| //window.Error = function() { return true }; | |
| function Each(list, fun) { | |
| for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); } | |
| }; | |
| var Nums = document.getElementById("SlideTriggers").getElementsByTagName("li"); | |
| var xsfade = new XsFade(document.getElementById("SlidePlayer").getElementsByTagName("img"), Nums); | |
| xsfade.init(); | |
| Each(Nums, function(o, i) { | |
| o.onmouseover = function() { | |
| xsfade.SetPlayIndex(i); | |
| } | |
| o.onmouseout = function() { | |
| xsfade.Resume(); | |
| } | |
| }) | |
| </script> |
CSS样式代码如下：
@charset "utf-8";
ul, li { list-style:none; }
/*begin 轮显图片*/
div#focus { margin:0 auto 3px auto; border:1px solid #ccc; float:left; overflow:hidden; position:inherit; width:530px; height:185px; }
#SlidePlayer { margin:0px; position:relative; float:left; overflow:hidden; width:530px; height:185px; }
.Slides li { float:left; list-style:none; display:inline; margin:0px; overflow:hidden; }
.Slides img { border:0; display:none; top:0; left:0; position:absolute; width:530px; height:185px; }
.SlideTriggers { z-index:999; margin:0; float:right; right:8px; bottom:8px; position:absolute; line-height:17px; font-family:arial; }
.SlideTriggers ul { list-style:none; color:#cc0000; height:10px; }
.SlideTriggers li { float:left; background-color:#222; margin:0px 2px; font-size:10px; width:17px; cursor:pointer; text-align:center; list-style:none; color:#ffffff; }
.SlideTriggers li.current { background-color:#cc0000; color:#FFFFFF; width:17px; cursor:pointer; }
/* end 轮显图片 - 创想工作室www.22BA.com整理*/
所用到的JS下载：http://www.22ba.com/uploadfile/2013/0311/20130311054749632.rar
效果如下：http://www.smezc.com/ 
