前幾天 在我同事博客裡面看到一篇幻燈片 所以覺得用Jqeury寫幻燈片也並不是很難 就是和我在博客裡面的tab自動切換的原理是一模一樣的 隻是形式不同而已!所以今天也寫瞭一個常見的幻燈片效果 用Jquery寫的 很簡單 也是用我上次tab自動切換的js 所以原理沒有什麼可說的 不懂的可以看看上次寫的TAB自動切換代碼:下面的一張截圖:
就是類似這種幻燈片:
下面是HTML結構和CSS樣式 www.aiwalls.com
<!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>
.Marquee{ width:490px; margin:50px auto 0; overflow:hidden;}
body,p,ul,li{ margin:0; padding:0;}
ul,li{ list-style:none;}
img{ display:block; border:none;}
.content-main{ width:490px; height:170px; overflow:hidden;}
.content{ width:490px; height:170px; overflow:hidden;}
.hide{ display:none;}
.menu{ width:490px; height:22px; overflow:hidden; background:#966;}
.menu li{ width:160px; height:22px; overflow:hidden; float:left; line-height:22px; text-align:center;}
.menu li.last-col{ width:170px; height:22px; overflow:hidden;}
.current{ background: #F00;}
.content a{ width:490px; height:170px; overflow:hidden; display:block;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="autoTab.js"></script>
</head>
<body>
<p id="Marquee" class="Marquee">
<p class="content-main">
<p class="content"><a href="#" target="_blank"><img src="images/1.jpg"/></a></p>
<p class="content hide"><a href="#" target="_blank"><img src="images/2.jpg"/></a></p>
<p class="content hide"><a href="#" target="_blank"><img src="images/3.jpg"/></a></p>
</p>
<ul class="menu">
<li class="current">tab1</li>
<li>tab2</li>
<li class="last-col">tab3</li>
</ul>
</p>
<script type="text/javascript">
new tabMarquee("#Marquee",3);
</script>
</body>
</html>
JS代碼如下:
// JavaScript Document
function tabMarquee(obj,count){
_this = this;
_this.obj = obj;
_this.count = count;
_this.time = 3000; //停留的時間
_this.n = 0;
var t;
this.slider = function(){
$(_this.obj + " .menu li").bind("mouseover",function(event){
$(event.target).addClass("current").siblings().removeClass("current");
var index = $(_this.obj + " .menu li").index(this);
$(_this.obj + " .content-main .content").eq(index).show().siblings().hide();
_this.n = index;
})
}
this.addHover = function(){
$(_this.obj).hover(function(){
clearInterval(t);
},function(){
t = setInterval(_this.autoPlay,_this.time);
})
}
this.autoPlay = function(){
_this.n = _this.n >=(_this.count-1) ? 0 : ++_this.n;
$(_this.obj + " .menu li").eq(_this.n).trigger("mouseover");
}
this.factory = function(){
this.slider();
this.addHover();
t = setInterval(this.autoPlay,_this.time);
}
this.factory();
}
下面傳個附件 看不懂可以下載下來先看看效果 然後稍微理解下 就ok瞭!其實說真的js重要 但是HTML結構和CSS樣式同樣重要 有時結構寫好的話 css寫好的話 js就很簡單!!
下載:http://up.aiwalls.com/2011/1128/20111128051443911.rar
本文出自 “塗根華前端博客” 博客