您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
javascript原生色块儿轮播特效
发布时间：2015-07-25 08:02:03编辑：雪饮阅读（）
身为雪饮个人博客博主的我一向是比较执着的，在雪饮个人博客建立初期，上面的百度联盟色块儿广告是用js模拟的，哪些swf的flash广告也只是嵌套了原swf文件，而并不是百度等的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=gb18030" />
<title>Untitled Document</title>
<style type="text/css">
#box{
width:900px;
height:300px;
background:pink;
text-align:center;
margin:0 auto;
}
.abt{
width:250px;
height:300px;
background:green;
display:inline-block;
line-height:300px;
}
</style>
<script type="text/javascript">
var autoChange = setTimeout(x,1000);
var y=1;
function x(){
for(var i=1;i<=3;i++){
var color="green";
if(i==y){
color="yellow";
}
document.getElementById("a"+i).style.background=color;
}
//for循环结束
y++;
if(y>3){y=1;}
autoChange = setTimeout(x,1000);
}
function test(obj){
window.clearTimeout(autoChange);//鼠标悬停之时清除该方法的循环
obj.style.background="yellow";
var id=obj.id;//获取当前对象的id
var z=1;
for(var i=1;i<=3;i++){
var yanse=document.getElementById("a"+i).style.background;//循环并获取当前颜色
var xunhuanid="a"+i;
if(yanse=="yellow" & xunhuanid!=id){
document.getElementById("a"+i).style.background="green";
}
}
}
function test1(obj){
obj.style.background="green";
autoChange = window.setTimeout(x,1000);
}
</script>
</head>
<body>
<div id="box">
<a href="" id="a1" class="abt" style="float:left;" onmouseover="test(this)" onmouseout="test1(this)" title="title1">a标签1</a>
<a href="" id="a2" class="abt" onmouseover="test(this)" onmouseout="test1(this)" title="title2">a标签2</a>
<a href="" id="a3" class="abt" style="float:right;" onmouseover="test(this)" onmouseout="test1(this)" title="title3">a标签3</a>
</div>
</body>
</html>
关键字词：javascript,色块儿轮播,个人博客