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 id="ifocus">
<div id="ifocus_pic">
<div 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 id="ifocus_opdiv"></div>
	<div id="ifocus_tx">
	<ul>
		<li class="current">2009年度中国最美的地方</li>
		<li class="normal">国家不再允许任何省份搞特例恢复“五一”</li>
		<li class="normal">我心中最想去的地方，是哪里呢？</li>
		<li class="normal">欢迎来此旅游</li>
	</ul>
		</div>
	</div>
	<div id="ifocus_btn">
	<ul>
	<li class="current"><img src="http://p1.mb5u.com/texiao/1/20110225160441147.jpg" width="90" height="47" alt="" /></li>
	<li class="normal"><img src="http://p1.mb5u.com/texiao/1/20110225160441148.jpg" width="90" height="47" alt="" /></li>
	<li class="normal"><img src="http://p1.mb5u.com/texiao/1/20110225160441149.jpg" width="90" height="47" alt="" /></li>
	<li 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订阅特效代码搜索

图片特效特效推荐

猜你也喜欢看这些