当前位置：首页 → 问答吧 → jQuery四图轮换广告

jQuery四图轮换广告

时间：2010-08-01

来源：互联网

哈哈，刚学习jQuery不久，发现jQuery是个这么好的东西，今天项目中一个动画轮换效果本来要用flash实现，悲哀的我又不会flash，想到用jQuery实现，不想用了这么简短的代码写出来了，这种效果用纯javascript不知道猴年马月能做出来。俺一向鄙视框架，现在不得不鄙视自己了。强烈推荐大家都用jQuery。牛逼的很啦...
不知道代码有问题没？反正IE 7，FF 3.6，Chrome 6都是测试OK的。

adv.rar (276.46 KB)

<!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=utf-8" />
<title>四图动画展示</title>
<style type="text/css">
#adver{width:400px;height:268px;position:relative;}
.pic{width:400px;height:268px;position:absolute;}
.pic img{border:none;}
#adver ul{position:absolute;right:0;bottom:0;list-style-type:none;margin:0;padding:0;}
#adver ul li{float:left;height:20px;width:20px;background:url(trans.png) no-repeat;margin-left:1px;text-align:center;line-height:20px;font-size:12px;font-family:Tahoma, Geneva, sans-serif;}
</style>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/*
*标题:jQuery四图切换动画仿flash展示效果
*时间：2010年8月1日
*jQuery版本：1.4.2
*/
$(document).ready(function(){
$("#adver ul li").eq(0).css({"background":"black","cursor":"pointer","color":"red","font-size":"14px"});//页面载入后默认第一幅图的样式
/*
*定时器自动滑动相关
*/
c = 1; //全局自增属性,可理解为指针变量，指向当前显示标签
function circle(){ //执行样式切换
var k = c%$("#adver ul li").length; //利用求余实现自动循环
$("#adver ul li").eq(k).css({"background":"black","cursor":"pointer","color":"red","font-size":"14px"});
$(".pic").each(
function(j){
if(j!=k){
$(this).fadeOut(1000);
}else{
$(this).fadeIn(1000);
}
}
);
$("#adver ul li").each(function(j){
if(k!=j){
$("#adver ul li").eq(j).css({"background":"url(trans.png)","color":"black","font-size":"12px"});
}
});
c++;
}
int = setInterval(circle,1000*3);
/*
*鼠标交互相关
*/
$("#adver ul li").each(function(i){
$(this).hover(
function(){
c = i; //将定时器指向当前鼠标移动到的元素上
$(this).css({"background":"black","cursor":"pointer","color":"red","font-size":"14px"});
$("#adver ul li").each(function(k){
if(k!=i){
$(this).css({"background":"url(trans.png)","color":"black","font-size":"12px"});
}
});
$(".pic").each(
function(j){
if(j!=i){
$(this).fadeOut(1000);
}else{
$(this).fadeIn(1000);
}
}
);
},function(){
}
);
});
});
</script>
</head>
<body>
<div id="adver">
<div class="pic" style="display:block;"><a href="#"><img src="1.jpg" /></a></div>
<div class="pic" style="display:none;"><a href="#"><img src="2.jpg" /></a></div>
<div class="pic" style="display:none;"><a href="#"><img src="3.jpg" /></a></div>
<div class="pic" style="display:none;"><a href="#"><img src="4.jpg" /></a></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</body>
</html>

复制代码

作者: caoyangqingchun 发布时间: 2010-08-01

不错收下了！

作者: sheak 发布时间: 2010-08-03

jQuery四图轮换广告

热门阅读

热门下载