如何在jQuery Slider中为每个图像添加标题文本 | Slider中为每个图像添加标题文本

本文介绍了如何在jQuery Slider中为每个图像添加标题文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用此滑块 [] ...它完全符合我的需求。现在我只想为Slider中的每个图像添加标题文本。

 < ;  ！DOCTYPE     HTML  >  
 <   html  >  
 <   head  >  
 <   meta     charset   =  utf-8 >  
 <   title  >  jQuery responsiveSlides插件D emo <   / title  >  
 <  风格 >  
 #content {
宽度：100％; 
身高：450px; 
头寸：相对; 
背景：＃99FF33; 
} 
 
 <   / style  >  
 <   script    类型  =  text / javascript    src   =   jquery-1.9.1.min.js >  <   / script  >  
 <   script     type   =  text / javascript    src   =  jquery.onImagesLoad .min.js >  <   / script  >  
 <   script     type   =  text / javascript    src   =  jquery.responsiveSlides.js >  <   / script  >  
 <   / head  >  
 <   body  >  
 <   div     id   = 内容 >  
 <   img     src   =  1.jpg >  
 <   img     src   =  2.jpg >  
 <   img     src   =  3.jpg > ;  
 <   / div  >  
 <   script    语言  =  javascript >  
 
 $（function（）{
 
 var p = $（'＃content' ）.responsiveSlides（{
身高：450，//幻灯片竞赛高度
背景：'＃fff'，//背景颜色和覆盖层的颜色为fadeout on init 
 autoStart：true，/ / boolean autostart 
 startDelay：0，//开始白色延迟
 effectInterval：5000，//交换照片的时间
 effectTransition：1000，//时间效果
分页：[
 {
 active：true，//激活分页
 inner：true，//分页内或aouside slide conteiner 
 position：'B_R'，/ * 
分页对齐：
 T_L =左上角
 T_C =顶部中心
 T_R =右上角
 
 B_L =左下角
 B_C =底部中心
 B_R =右下角
 * / 
 margin：10，//分页边距
 dotStyle：''，// dot分页类样式
 dotStyleHover：''，// dot分页类悬停样式
 dotStyleDisable：''// dot分页类禁用样式
} 
] 
}）; 
 
}）; 
 <   / script  >  
 <   / body  >  
 <   / html   >

解决方案

I am using this slider http://www.jqueryscript.net/slider/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides.html[^] ... its perfectly meet my needs. Now i just want to add caption text for each image in the Slider.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery responsiveSlides Plugin Demo</title>
<style>
#content {
    width:100%;
    height:450px;
    position:relative;
    background:#99FF33;
}

</style>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.onImagesLoad.min.js"></script>
<script type="text/javascript" src="jquery.responsiveSlides.js"></script>
</head>
<body>
<div id="content">
<img src="1.jpg">
 <img src="2.jpg">
 <img src="3.jpg">
 </div>
<script language="javascript">

$(function(){

    var p=$('#content').responsiveSlides({
        height:450,                     // slides conteiner height
        background:'#fff',              // background color and color of overlayer to fadeout on init
        autoStart:true,                 // boolean autostart
        startDelay:0,                   // start whit delay
        effectInterval:5000,            // time to swap photo
        effectTransition:1000,          // time effect
        pagination:[
            {
                active:true,            // activate pagination
                inner:true,             // pagination inside or aouside slides conteiner
                position:'B_R',         /*
                                            pagination align:
                                                T_L = top left
                                                T_C = top center
                                                T_R = top right

                                                B_L = bottom left
                                                B_C = bottom center
                                                B_R = bottom right
                                        */
                margin:10,              // pagination margin
                dotStyle:'',            // dot pagination class style
                dotStyleHover:'',       // dot pagination class hover style
                dotStyleDisable:''      // dot pagination class disable style
            }
        ]
    });

});
</script>
</body>
</html>

解决方案

这篇关于如何在jQuery Slider中为每个图像添加标题文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！