溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前幾天 在我同事博客里面看到一篇幻燈片 所以覺得用Jqeury寫幻燈片也并不是很難 就是和我在博客里面的tab自動切換的原理是一模一樣的 只是形式不同而已！所以今天也寫了一個常見的幻燈片效果 用Jquery寫的 很簡單 也是用我上次tab自動切換的js 所以原理沒有什么可說的 不懂的可以看看上次寫的TAB自動切換代碼：下面的一張截圖：
就是類似這種幻燈片：
下面是HTML結構和CSS樣式
- <!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,div,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>
- <div id="Marquee" class="Marquee">
- <div class="content-main">
- <div class="content"><a href="#" target="_blank"><img src="p_w_picpaths/1.jpg"/></a></div>
- <div class="content hide"><a href="#" target="_blank"><img src="p_w_picpaths/2.jpg"/></a></div>
- <div class="content hide"><a href="#" target="_blank"><img src="p_w_picpaths/3.jpg"/></a></div>
- </div>
- <ul class="menu">
- <li class="current">tab1</li>
- <li>tab2</li>
- <li class="last-col">tab3</li>
- </ul>
- </div>
- <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就很簡單！！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
