基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
更新時(shí)間：2013年11月07日 16:05:56 投稿：whsnow
制作左右按鈕與標(biāo)題文字圖片切換效果的方法有很多，在本文為大家介紹下使用jquery圖片切換插件是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過(guò)
本例用了2個(gè)js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js，到演示頁(yè)面可以查看
CSS Code
復(fù)制代碼 代碼如下:
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* ui-banner */
.ui-banner{display:block;position:relative;width:820px;margin:20px auto;}
.ui-banner.ui-banner-invalid{display:none;}
.ui-banner,.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{height:233px;}
.ui-banner .ui-banner-slides,.ui-banner .ui-banner-slogans,.ui-banner .ui-banner-arrow{position:absolute;top:0;}
.ui-banner ul{list-style-type:none;margin:0;padding:0;overflow:hidden;}
.ui-banner .ui-banner-slides{width:654px;height:233px;left:1px;}
.ui-banner .ui-banner-slides li{display:none;position:absolute;}
.ui-banner .ui-banner-slides li img{width:654px;height:233px;border:none;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current,.ui-banner .ui-banner-slides li.ui-banner-slides-prev,.ui-banner .ui-banner-slides li.ui-banner-slides-next{display:block;}
.ui-banner .ui-banner-slides li.ui-banner-slides-current{left:0;}
.ui-banner .ui-banner-slides li.ui-banner-slides-prev{left:-654px;}
.ui-banner .ui-banner-slides li.ui-banner-slides-next{left:654px;}
.ui-banner .ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px 30px 10px 15px;width:118px;rightright:0;}
.ui-banner .ui-banner-slogans li{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px 0 10px 10px;margin-left:5px;border-bottom:1px solid #79B4DF;list-style:none;list-style-type:none;}
.ui-banner .ui-banner-slogans li.ui-banner-slogans-current{color:#FFF;}
.ui-banner .ui-banner-slogans li.ui-banner-slogans-prev{border-bottom:none;}
.ui-banner .ui-banner-arrow{display:block;width:45px;outline:none;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-prev{left:-14px;top:100px;background:transparent url("images/hero-slider-arrow-left.png") no-repeat 0 0;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;background:transparent url("images/hero-slider-arrow-right.png") no-repeat 0 0;}
.ui-banner .ui-banner-arrow.ui-banner-arrow-next img{left:-15px;}
.ui-banner .ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;}
</style>
XML/HTML Code
復(fù)制代碼 代碼如下:
<div id="banners" class="ui-banner">
<ul class="ui-banner-slides">
<li><a href=""><img src="../dalian.jpg" alt="" title=""></a></li>
<li><a href=""><img src="../erlianhaote.png" alt="" title=""></a></li>
<li><a href=""><img src="../mohe.png" alt="" title=""></a></li>
<li><a href=""><img src="../sanya.jpg" alt="" title=""></a></li>
<li><a href=""><img src="../xianggang.jpg" alt="" title=""></a></li>
<li><a href=""><img src="../zhoushan.jpg" alt="" title=""></a></li>
</ul><!--ui-banner-slides end-->
<ul class="ui-banner-slogans">
<li>大連</li>
<li>二連浩特</li>
<li>漠河</li>
<li>三亞</li>
<li>舟山</li>
</ul><!--ui-banner-slogans end-->
<a href="" class="ui-banner-arrow ui-banner-arrow-prev png_bg"></a><a href="" class="ui-banner-arrow ui-banner-arrow-next png_bg"></a><div class="ui-banner-overlay png_bg"></div></div>
JavaScript Code
復(fù)制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$('#banners').bannerize({
shuffle: 1,
interval: "5"
});
});
</script>
相關(guān)文章
這篇文章主要介紹了jQuery獲取URL請(qǐng)求參數(shù)的方法,涉及jquery針對(duì)URL的獲取與字符串的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
jQuery登陸判斷簡(jiǎn)單實(shí)現(xiàn)代碼
登陸判斷在實(shí)際應(yīng)用中還是比較常見(jiàn)，在客戶端執(zhí)行判斷可以減少服務(wù)器端的負(fù)擔(dān)，感興趣的朋友可以參考下2013-04-04
20個(gè)非常棒的Jquery實(shí)用工具 國(guó)外文章
網(wǎng)站設(shè)計(jì)者往往會(huì)設(shè)計(jì)一些小的工具類（widgets）或者一些可復(fù)用的程序，從而使頁(yè)面更楚楚動(dòng)人，更吸引瀏覽者駐足。這里收集了20個(gè)常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設(shè)計(jì)人員和站長(zhǎng)非常容易地創(chuàng)建漂亮的站點(diǎn)。2010-01-01
動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用
這篇文章主要介紹了動(dòng)態(tài)調(diào)用css文件——jquery的應(yīng)用2007-02-02
jQuery對(duì)表單的操作代碼集合，學(xué)習(xí)jquery的朋友可以參考下。2011-04-04
這篇文章主要介紹了JQuery擴(kuò)展對(duì)象方法操作,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery使用$.fn.extend方法擴(kuò)展對(duì)象方法的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
jQuery獲取Select選擇的Text和Value(詳細(xì)匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值，以至搜集用戶的需求，本文整理了一些常用而實(shí)用的操作技巧，感興趣的朋友可以了解下，就當(dāng)鞏固自己的知識(shí)了，希望本文對(duì)你有所幫助2013-01-01
jquery zTree異步加載簡(jiǎn)單實(shí)例分享
Ztree是一個(gè)使用jQuery實(shí)現(xiàn)的JSP頁(yè)面的各種功能樹(shù)，本文介紹一個(gè)異步獲取數(shù)據(jù)到下拉樹(shù)的實(shí)現(xiàn)方式,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ztree有所幫助2013-02-02
制作高質(zhì)量的JQuery Plugin 插件的方法
最近jquery非常流行，想個(gè)性化定制一些功能，就可以將代碼寫(xiě)成插件的形式，方便使用與修改。2010-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)圖片跟隨效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08