基于jquery插件制作左右按鈕與標題文字圖片切換效果
更新時間：2013年11月07日 16:05:56 投稿：whsnow
制作左右按鈕與標題文字圖片切換效果的方法有很多，在本文為大家介紹下使用jquery圖片切換插件是如何實現(xiàn)的，感興趣的朋友不要錯過
本例用了2個js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js，到演示頁面可以查看
CSS Code
復制代碼 代碼如下:
<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
復制代碼 代碼如下:
<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
復制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function(){
$('#banners').bannerize({
shuffle: 1,
interval: "5"
});
});
</script>
相關文章
這篇文章主要介紹了jQuery獲取URL請求參數(shù)的方法,涉及jquery針對URL的獲取與字符串的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
登陸判斷在實際應用中還是比較常見，在客戶端執(zhí)行判斷可以減少服務器端的負擔，感興趣的朋友可以參考下2013-04-04
網(wǎng)站設計者往往會設計一些小的工具類（widgets）或者一些可復用的程序，從而使頁面更楚楚動人，更吸引瀏覽者駐足。這里收集了20個常用Jquery工具類，這些小的工具可以幫助網(wǎng)站設計人員和站長非常容易地創(chuàng)建漂亮的站點。2010-01-01
動態(tài)調(diào)用css文件——jquery的應用
這篇文章主要介紹了動態(tài)調(diào)用css文件——jquery的應用2007-02-02
jQuery對表單的操作代碼集合，學習jquery的朋友可以參考下。2011-04-04
這篇文章主要介紹了JQuery擴展對象方法操作,結合實例形式簡單分析了jQuery使用$.fn.extend方法擴展對象方法的相關操作技巧,需要的朋友可以參考下2018-08-08
jQuery獲取Select選擇的Text和Value(詳細匯總)
Select選擇的Text和Value在使用中可能都需要獲取到它們的值，以至搜集用戶的需求，本文整理了一些常用而實用的操作技巧，感興趣的朋友可以了解下，就當鞏固自己的知識了，希望本文對你有所幫助2013-01-01
Ztree是一個使用jQuery實現(xiàn)的JSP頁面的各種功能樹，本文介紹一個異步獲取數(shù)據(jù)到下拉樹的實現(xiàn)方式,感興趣的朋友可以了解下，或許對你學習ztree有所幫助2013-02-02
最近jquery非常流行，想個性化定制一些功能，就可以將代碼寫成插件的形式，方便使用與修改。2010-04-04
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)圖片跟隨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08