Js+Css圖片切換，帶縮略圖響應鼠標滑過_圖片特效特效

超好的圖片幻燈切換效果，帶縮略圖，響應鼠標滑過動作，鼠標滑過自動切換為相應大圖，配合JS生成的動畫效果，看上去很入眼，比較適合圖片站或游戲站做精品推薦，而且也容易替換為動態讀取，全新的CSS LI列表，代碼更簡潔，很不錯吧？

<!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" mrc="text/html; charset=gb2312">
<title>帶縮略圖響應鼠標滑過圖片切換</title>
<style type="text/css">
* { margin:0; padding:0; word-break:break-all; }
body {
	font:12px/1.6em Helvetica, Arial, sans-serif;
	margin: 0px;
}
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; }
#ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:url() no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
#ifocus_tx .normal { display:none; }
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function(){
			oldonload();
			func();
		}
	}
}

setInterval('autoiFocus()',3500);
var atuokey = false;
function autoiFocus() {
	if(!$('ifocus')) return false;
	if(atuokey) return false;
	var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
	var listLength = focusBtnList.length;
	for(var i=0; i<listLength; i++) {
		if (focusBtnList[i].className == 'current') var currentNum = i;
	}
	if (currentNum==0&&listLength!=1 ){
		moveElement('ifocus_piclist',0,-225,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',1);
	}
	if (currentNum==1&&listLength!=2 ){
		moveElement('ifocus_piclist',0,-450,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',2);
	}
	if (currentNum==2&&listLength!=3 ){
		moveElement('ifocus_piclist',0,-675,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',3);
	}
	if (currentNum==3 ){
		moveElement('ifocus_piclist',0,0,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',0);
	}
	if (currentNum==1&&listLength==2 ){
		moveElement('ifocus_piclist',0,0,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',0);
	}
	if (currentNum==2&&listLength==3 ){
		moveElement('ifocus_piclist',0,0,5);
		classNormal('ifocus_btn','ifocus_tx');
		classCurrent('ifocus_btn','ifocus_tx',0);
	}
}
addLoadEvent(iFocusChange);
</script>
</head>

<body>
<br />
<div align="center">
<div   class="ttx7drf"   id="ifocus">
<div   class="vhz7xjt"   id="ifocus_pic">
<div   class="7jr5lbd"   id="ifocus_piclist" style="left:0; top:0;">
	<ul>
	<li><a href="/" target="_blank"><img src="http://p1.mb5u.com/texiao/20110225160441151.jpg" width="550" height="225" alt="" border="0" /></a></li>
	<li><a href="/" target="_blank"><img src="http://p1.mb5u.com/texiao/20110225160441152.jpg" width="550" height="225" alt="" border="0" /></a></li>
	<li><a href="/" target="_blank"><img src="http://p1.mb5u.com/texiao/20110225160441153.jpg" width="550" height="225" alt="" border="0" /></a></li>
	<li><a href="/" target="_blank"><img src="http://p1.mb5u.com/texiao/20110225160441154.jpg" width="550" height="225" alt="" border="0" /></a></li>
	</ul>
	</div>
	<div   class="ttn75lv"   id="ifocus_opdiv"></div>
	<div   class="lldxpbf"   id="ifocus_tx">
	<ul>
		<li id="p5hvz7d"    class="current">2009年度中國最美的地方</li>
		<li id="vf7jx5x"    class="normal">國家不再允許任何省份搞特例恢復“五一”</li>
		<li id="nnrnthj"    class="normal">我心中最想去的地方，是哪里呢？</li>
		<li id="l7dlr55"    class="normal">歡迎來此旅游</li>
	</ul>
		</div>
	</div>
	<div   class="vtzfjzz"   id="ifocus_btn">
	<ul>
	<li id="zdx7f5h"    class="current"><img src="http://p1.mb5u.com/texiao/1/20110225160441147.jpg" width="90" height="47" alt="" /></li>
	<li id="npf75lv"    class="normal"><img src="http://p1.mb5u.com/texiao/1/20110225160441148.jpg" width="90" height="47" alt="" /></li>
	<li id="rtjdf75"    class="normal"><img src="http://p1.mb5u.com/texiao/1/20110225160441149.jpg" width="90" height="47" alt="" /></li>
	<li id="hpfvbbx"    class="normal"><img src="http://p1.mb5u.com/texiao/1/20110225160441150.jpg" width="90" height="47" alt="" /></li>
	</ul>
	</div>
</div>
</div>
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-12-09

[收藏][報錯][返回列表]

相關圖片特效特效：

Js+Css圖片切換，帶縮略圖響應鼠標滑過_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些