首頁 > 開發者 > JavaScript

Jquery封裝投影片效果

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

前幾天 在我同事部落格裡面看到一篇投影片 所以覺得用Jqeury寫投影片也並不是很難 就是和我在部落格裡面的tab自動切換的原理是一模一樣的 只是形式不同而已！所以今天也寫了一個常見的投影片效果 用Jquery寫的  很簡單 也是用我上次tab自動切換的js  所以原理沒有什麼可說的 不懂的可以看看上次寫的TAB自動切換代碼：下面的一張：

 

就是類似這種投影片：
下面是HTML結構和CSS樣式 www.2cto.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,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="images/1.jpg"/></a></div>
            <div class="content hide"><a href="#" target="_blank"><img  src="images/2.jpg"/></a></div>
            <div class="content hide"><a href="#" target="_blank"><img  src="images/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就很簡單！！
 

下載：http://www.bkjia.com/uploadfile/2011/1128/20111128051443911.rar
 

本文出自 “塗根華前端部落格” 部落格

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More