js 带缩略图纯javascript图片切换代码

时间：2022-07-02 14:44:34 编辑：袖梨来源：一聚教程网

提示：您可以先修改部分代码再运行

js 带缩略图纯javascript图片切换代码
<!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" content="text/html; charset=gb2312">
<title>18115.com首页图片切换</title>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body {
	background:#fff;
	color:#000000;
	font:12px/1.6em Helvetica, Arial, sans-serif;
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 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; } /*Always show Firefox scrollbar*/

/* iFocus style */
#ifocus {   margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }
	#ifocus_pic { display:inline; position:relative; float:left;   overflow:hidden; margin:10px 0 0 10px; }
		#ifocus_piclist { position:absolute; }
		#ifocus_piclist li {   overflow:hidden; }
		#ifocus_piclist img {   }
	#ifocus_btn { display:inline; float:right;  margin:9px 9px 0 0; }
		#ifocus_btn li {   cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
		#ifocus_btn img {   margin:7px 0 0 11px; }
		#ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
	#ifocus_opdiv { position:absolute; left:0; bottom:0;   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>

function classNormal(iFocusBtnID,iFocusTxID){
	var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
	var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
	for(var i=0; i<iFocusBtns.length; i++) {
		iFocusBtns[i].className='normal';
		iFocusTxs[i].className='normal';
	}
}

function classCurrent(iFocusBtnID,iFocusTxID,n){
	var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
	var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
	iFocusBtns[n].className='current';
	iFocusTxs[n].className='current';
}

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="http://111com.net" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/01.jpg" alt="武林三国" border="0" /></a></li>
				<li><a href="http://111com.net" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/02.jpg" alt="武林英雄" border="0" /></a></li>
				<li><a href="http://111com.net" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/03.jpg" alt="商业大亨" border="0" /></a></li>
				<li><a href="http://111com.net" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/04.jpg" alt="帝国远征" border="0" /></a></li>
			</ul>
		</div>
		<div id="ifocus_opdiv"></div>
		<div id="ifocus_tx">
			<ul>
				<li class="current">2008年度排名第一的网页游戏-武林三国</li>
				<li class="normal">2009年最新的网页游戏，游戏特长:个人英雄主义 </li>
				<li class="normal">商业大亨，挑战亿万富翁，09年顶级网页游戏</li>
				<li class="normal">一款2009年不得不玩的网页游戏-帝国远征</li>
			</ul>
		</div>
	</div>
	<div id="ifocus_btn">
		<ul>
			<li class="current"><a href="/icon/18115/btn_01.jpg" class="js-smartPhoto-pc" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/btn_01.jpg" alt="" /></a></li>
			<li class="normal"><a href="/icon/18115/btn_02.jpg" class="js-smartPhoto-pc" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/btn_02.jpg" alt="" /></a></li>
			<li class="normal"><a href="/icon/18115/btn_03.jpg" class="js-smartPhoto-pc" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/btn_03.jpg" alt="" /></a></li>
			<li class="normal"><a href="/icon/18115/btn_04.jpg" class="js-smartPhoto-pc" target="_blank"><img  alt="js 带缩略图纯javascript图片切换代码"  src="/icon/18115/btn_04.jpg" alt="" /></a></li>
		</ul>
	</div>
</div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

推荐专题

最新下载

热门教程

js 带缩略图纯javascript图片切换代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程