首頁 > 開發者 > JavaScript

選項卡動態替換banner圖片路徑

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

 許多網站都有banner模板塊，大多數的banner都需要切換的的，也是有這樣的一個需求，今天下午就寫了個選項卡的效果，實現了動態替換圖片的路徑，這樣就實現了動態替換圖片的路徑實現了轉場效果，我把它封裝成函數了，這樣就可以多次調用，非常方便。我也就是前天開始用函數式來開發的，調用函數只需設定下參數，非常的方便。在開源中國可以下載。Demo
：


<!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>選項卡動態替換banner圖片路徑</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
        hoverFn($("ul li"),"hover_css",$("p img"),"big");//調用函數    
        /*
            定義滑鼠滑過替換圖片路徑的
            函數 2012.8.24 
            作者 zoowar 
            參數說明
            obj 當前觸發事件的對象
            hc 當前選中元素的類名
            content 選擇需要替換路徑的圖片
            url 為圖片的路徑
        */
        function hoverFn(obj,hc,content,url){
        obj.hover(function(){
                var h_css=hc;              
                $(this).addClass(h_css).siblings().removeClass(h_css);
                var imgUrl=$(this).attr(url);
                content.attr("src",imgUrl);            
            });
        }
})
</script>
<style type="text/css">
div{width:1024px;height:768px;margin:0 auto;}
ul{width:1024px;height:40px;margin:0;padding:0;}
ul li{width:254px;line-height:40px;border-bottom:solid 2px #FB066F;text-align:center;list-style-type:none;float:left;margin-right:2px;background:#fff;}
ul li.hover_css{border-bottom:solid 2px #06F;background:#f0f0f0;}
p{margin:0;padding:0;text-align:center;padding-top:20px;}
</style>
</head>
            
<body>
<div>
<ul><li class="hover_css" big="img/1.jpg">風景</li><li big="img/2.jpg">美女</li><li big="img/3.jpg">帥鍋</li><li big="img/4.jpg">惡搞</li></ul>
<p>
<img src="img/1.jpg" />
</p>
</div>
</body>
</html>

本文章原先以中文撰寫並發佈於 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