基于jquery插件制作左右按钮与标题文字图片切换效果


Posted in Javascript onNovember 07, 2013

本例用了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> 
<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>
Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
JQuery中each()的使用方法说明
Aug 19 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
append和appendTo的区别以及appendChild用法
Dec 24 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
Jul 22 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
js canvas画布实现高斯模糊效果
Nov 27 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
简单的Jquery全选功能
Nov 07 #Javascript
javascript去掉前后空格的实例
Nov 07 #Javascript
Javascript操作URL函数修改版
Nov 07 #Javascript
js字符串转成JSON
Nov 07 #Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 #Javascript
使用JavaScript实现Java的List功能(实例讲解)
Nov 07 #Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 #Javascript
You might like
解析如何通过PHP函数获取当前运行的环境 来进行判断执行逻辑(小技巧)
2013/06/25 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
Laravel5.4框架使用socialite实现github登录的方法
2019/03/20 PHP
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
js阻止浏览器默认行为的简单实例
2016/05/15 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
JavaScript编程中实现对象封装特性的实例讲解
2016/06/24 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
详解nodejs微信jssdk后端接口
2017/05/25 NodeJs
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
2017/08/08 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
vue+element+Java实现批量删除功能
2019/04/08 Javascript
JS 自执行函数原理及用法
2019/08/05 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
[01:15]PWL S2开团时刻第二期——他们杀 我就白给
2020/11/25 DOTA
简单的通用表达式求10乘阶示例
2014/03/03 Python
python中的装饰器详解
2015/04/13 Python
python简单实例训练(21~30)
2017/11/15 Python
Python实现基于二叉树存储结构的堆排序算法示例
2017/12/08 Python
python文件拆分与重组实例
2018/12/10 Python
python 获取图片分辨率的方法
2019/01/08 Python
python通过http下载文件的方法详解
2019/07/26 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
Python利用matplotlib绘制散点图的新手教程
2020/11/05 Python
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
波兰家具和室内装饰品购物网站:Vivre
2018/04/10 全球购物
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
什么造成了Java里面的异常
2016/04/24 面试题
工作鉴定评语
2014/05/04 职场文书
上级领导检查欢迎词
2015/09/30 职场文书
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers