招行官网漂亮JS焦点图分享

发表于2013-03-11 17:49:35来源于深圳创想网页设计工作室

网络瘫痪上不了网？电脑出故障？找破解软件？加入创想工作室QQ群，向大神求助，一步解决问题！QQ群号码：326338868。[点此获取更多QQ群]

今天创想工作室给大家分享一款漂亮、切换流畅的JS焦点图，是本人在招商银行网站上看到的，看了一下代码，可以很轻松的进行拓展：图片切换的数量、图片大小等，总之很不错的一款JS焦点图特效代码！

代码如下：

<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="https://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="https://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="https://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="https://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="https://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下载：https://www.22ba.com/uploadfile/2013/0311/20130311054749632.rar

效果如下：http://www.smezc.com/