基于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 相关文章推荐
JS 创建对象(常见的几种方法)
Nov 03 Javascript
JavaScript prototype对象的属性说明
Mar 13 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JS小功能(checkbox实现全选和全取消)实例代码
Nov 28 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
那些精彩的JavaScript代码片段
Jan 12 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
JS实现的简单表单验证功能完整实例
Oct 14 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
简单的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中长文章分页显示实现代码
2012/09/29 PHP
phpexcel导入excel数据使用方法实例
2013/12/24 PHP
PHP扩展Memcache分布式部署方案
2015/12/06 PHP
PHP动态生成指定大小随机图片的方法
2016/03/25 PHP
PHP将页面中点击数量高的链接进行高亮显示的方法
2016/05/30 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
jQuery添加options点击事件并传值实例代码
2016/05/18 Javascript
Bootstrap源码解读网格系统(3)
2016/12/22 Javascript
layui分页效果实现代码
2017/05/19 Javascript
bootstrap-table组合表头的实现方法
2017/09/07 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
详解用async/await来处理异步
2019/08/28 Javascript
vue实现简单跑马灯效果
2020/05/25 Javascript
python实现划词翻译
2020/04/23 Python
python实现代码行数统计示例分享
2014/02/10 Python
Python使用代理抓取网站图片(多线程)
2014/03/14 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python win32 简单操作方法
2017/05/25 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
彻底搞懂Python字符编码
2018/01/23 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
使用python模拟高斯分布例子
2019/12/09 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
CSS3 Notes: -webkit-box-reflect实现倒影的实例
2016/12/08 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
学生拾金不昧表扬信
2014/01/21 职场文书
2014年幼儿园班级工作总结
2014/12/17 职场文书
基层医务人员三严三实心得体会
2016/01/05 职场文书
个人工作总结(管理人员)范文
2019/08/13 职场文书
导游词之昭君岛
2020/01/17 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫