基于jquery插件制作左右按钮与标题文字图片切换效果
2023-06-13 09:15:11 时间
本例用了2个js文件jquery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js,到演示页面可以查看
CSSCode
复制代码代码如下:
CSSCode
<styletype="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:20pxauto;}
.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-bannerul{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-slidesli{display:none;position:absolute;}
.ui-banner.ui-banner-slidesliimg{width:654px;height:233px;border:none;}
.ui-banner.ui-banner-slidesli.ui-banner-slides-current,.ui-banner.ui-banner-slidesli.ui-banner-slides-prev,.ui-banner.ui-banner-slidesli.ui-banner-slides-next{display:block;}
.ui-banner.ui-banner-slidesli.ui-banner-slides-current{left:0;}
.ui-banner.ui-banner-slidesli.ui-banner-slides-prev{left:-654px;}
.ui-banner.ui-banner-slidesli.ui-banner-slides-next{left:654px;}
.ui-banner.ui-banner-slogans{background:#009AC9;height:213px;overflow:hidden;padding:10px30px10px15px;width:118px;rightright:0;}
.ui-banner.ui-banner-slogansli{cursor:pointer;color:#8DC4EC;text-align:left;font-weight:bold;font-size:12px;line-height:14px;padding:10px010px10px;margin-left:5px;border-bottom:1pxsolid#79B4DF;list-style:none;list-style-type:none;}
.ui-banner.ui-banner-slogansli.ui-banner-slogans-current{color:#FFF;}
.ui-banner.ui-banner-slogansli.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:transparenturl("images/hero-slider-arrow-left.png")no-repeat00;}
.ui-banner.ui-banner-arrow.ui-banner-arrow-next{left:630px;top:100px;background:transparenturl("images/hero-slider-arrow-right.png")no-repeat00;}
.ui-banner.ui-banner-arrow.ui-banner-arrow-nextimg{left:-15px;}
.ui-banner.ui-banner-overlay{bottombottom:0;height:10px;position:absolute;rightright:0;width:173px;}
</style>
XML/HTMLCode
<divid="banners"class="ui-banner">
<ulclass="ui-banner-slides">
<li><ahref=""><imgsrc="../dalian.jpg"alt=""title=""></a></li>
<li><ahref=""><imgsrc="../erlianhaote.png"alt=""title=""></a></li>
<li><ahref=""><imgsrc="../mohe.png"alt=""title=""></a></li>
<li><ahref=""><imgsrc="../sanya.jpg"alt=""title=""></a></li>
<li><ahref=""><imgsrc="../xianggang.jpg"alt=""title=""></a></li>
<li><ahref=""><imgsrc="../zhoushan.jpg"alt=""title=""></a></li>
</ul><!--ui-banner-slidesend-->
<ulclass="ui-banner-slogans">
<li>大连</li>
<li>二连浩特</li>
<li>漠河</li>
<li>三亚</li>
<li>香港</li>
<li>舟山</li>
</ul><!--ui-banner-slogansend-->
<ahref=""class="ui-banner-arrowui-banner-arrow-prevpng_bg"></a><ahref=""class="ui-banner-arrowui-banner-arrow-nextpng_bg"></a><divclass="ui-banner-overlaypng_bg"></div></div>
JavaScriptCode
<scripttype="text/javascript">
$(document).ready(function(){
$("#banners").bannerize({
shuffle:1,
interval:"5"
});
});
</script>
相关文章
- jQuery 绘图插件:jqPlot
- Happy.js:轻量级的 jQuery 表单验证插件
- jQuery表单插件jquery.form.js详解编程语言
- jQuery图片切换插件jquery.cycle.js详解编程语言
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js详解编程语言
- jquery插件实现瀑布流详解编程语言
- jQuery技巧大放送学习jquery的朋友可以看下
- 基于jQuery的表格操作插件
- 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
- 基于jquery的让textarea自适应高度的插件
- Jquery知识点三jquery表单对象操作
- JQuery中html()方法使用不当带来的陷阱
- JQuery之拖拽插件实现代码
- jqPlot基于jquery的画图插件
- 一款Jquery分页插件的改造方法(服务器端分页)
- Jquery进度条插件ProgressBar小问题解决
- 15款优秀的jQuery导航菜单插件分享
- 25个非常棒的jQuery滑块插件和教程小结
- 基于jquery的无限级联下拉框js插件
- 基于jquery的web页面日期格式化插件
- jquery.Jwin.js基于jquery的弹出层插件代码
- jQuery插件开发基础简单介绍
- jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
- jquery等宽输出文字插件使用介绍
- jquery操作cookie插件分享
- Jquery插件分享之气泡形提示控件grumble.js
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法