基于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 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
node.js中的fs.lchown方法使用说明
Dec 16 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
js实现碰撞检测特效代码分享
Oct 16 Javascript
JavaScript中捕获/阻止捕获、冒泡/阻止冒泡方法
Dec 07 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
微信小程序解除10个请求并发限制
Dec 18 Javascript
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
详解使用React制作一个模态框
Mar 14 Javascript
使用JQuery自动完成插件Auto Complete详解
Jun 18 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向socket服务器收发数据的方法
2015/01/24 PHP
php 在线导入mysql大数据程序
2015/06/11 PHP
php开发最强大的IDE编辑的phpstorm 2020.2配置Xdebug调试的详细教程
2020/08/17 PHP
解密效果
2006/06/23 Javascript
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
Node.js模块封装及使用方法
2016/03/06 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用
2016/09/09 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
vue 实现一个简单的全局调用弹窗案例
2020/09/10 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
python实现图片筛选程序
2018/10/24 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
python 带时区的日期格式化操作
2020/10/23 Python
python tkinter的消息框模块(messagebox,simpledialog)
2020/11/07 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
负责人任命书范本
2014/06/04 职场文书
租房安全协议书
2014/08/20 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
法人代表证明书
2014/09/18 职场文书
《春酒》教学反思
2016/02/22 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS