焦点图广告js特效代码

时间：2022-06-25 20:54:38 编辑：袖梨来源：一聚教程网

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

<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<style type="text/<a href="http://www.111com.net/cssdiv/css.html" target="_blank">css</a>">
body{margin:0;padding:0;}
ul,li{list-style-type:none;margin:0;padding:0;}
#bigpic{overflow:hidden;position:relative;}
#bigpic li{float:left;}
#bigpic img{float:left;border:none;}
#btn{position:absolute;bottom:10px;right:10px;}
ul#sPic{position:absolute;}
#btn a.hover{color:#f00;}
#btn a{color:#fff;text-decoration:none;}
</style>
<div id="bigpic">
	<ul id="sPic" style="left:0;top:0;">
		<li><a href="#"><img  src="https://img.111com.net/get_pic/2010/03/20100807055539689.jpg" alt="" /></a></li>
		<li><a href="#"><img  src="https://img.111com.net/get_pic/2010/03/20100807055545302.jpg" alt="" /></a></li>
		<li><a href="#"><img  src="https://img.111com.net/get_pic/2010/03/20100807055551156.jpg" alt="" /></a></li>
		<li><a href="#"><img  src="https://img.111com.net/get_pic/2010/03/20100807055558154.jpg" alt="" /></a></li>
	</ul>
	<div id="btn">
		<a href="###" class="hover" onclick="showPic(0)">1</a>
		<a href="###" onclick="showPic(1)">2</a>
		<a href="###" onclick="showPic(2)">3</a>
		<a href="###" onclick="showPic(3)">4</a>
	</div>
</div>
<script>
cNum = 0;
intAlphaStep=0.1;
var bPic = document.getElementById('bigpic');
var sPic = document.getElementById('sPic');
var btn = document.getElementById('btn');
var btnLink = btn.getElementsByTagName('a');
function showPic(num){
	var endX = -(num*bPic.clientWidth);
	curOpacity = 0;
	function goimg(){
		X = parseInt(sPic.style.left)
		if(parseInt(sPic.style.left)==endX) return true;
		if((endX-X)>0){
			X += Math.ceil((endX - X) / 20 )
		}else{
			X += Math.floor((endX - X) / 20)
		}
		sPic.style.left = X + 'px';
		setTimeout(goimg,5)
		for(i=0;i<4;i++){
			btnLink[i].className = '';
		}
		btnLink[num].className = 'hover';
	}
	goimg();
	setOpacity();
}
function autoPic(){
	curOpacity = 0;
	if(cNum<3){
		showPic(cNum+1);
		cNum++;
	}else if(cNum=3){cNum=-1;}
}
function setOpacity(){
	curOpacity+=intAlphaStep;
	sPic.style.filter='alpha(opacity='+(curOpacity*100)+')';
	sPic.style.opacity = curOpacity;
	if(curOpacity<0.9){
		setTimeout('setOpacity()',100)
	}
}
bPic.onmouseover = function(){
	clearInterval(auto);
}
bPic.onmouseout = function(){
	auto = setInterval(autoPic,2000);
}
auto = setInterval(autoPic,2000);
</script>
</body>
</html>

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

推荐专题

最新下载

热门教程

焦点图广告js特效代码

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程