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

最新推荐文章于 2021-05-30 18:44:02 发布

piperzero

最新推荐文章于 2021-05-30 18:44:02 发布

阅读量3.4k

点赞数

分类专栏：网站建设

本文链接：https://blog.csdn.net/freejs/article/details/14451699

版权

本示例展示了如何利用jQuery-ui-1.8.6.core.widget.js和jqueryui.bannerize.js创建一个图片轮播插件，包含左右箭头控制和标题文字切换功能。轮播效果具有响应式设计，图片宽度为654px，高度为233px，标题文字位于右侧，并可设置切换间隔时间为5秒。

摘要由CSDN通过智能技术生成

本例用了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;}  

 