如何在jQuery Slider中为每个图像添加标题文本 [英] How to add caption text for each image in the jQuery Slider
本文介绍了如何在jQuery Slider中为每个图像添加标题文本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用此滑块 http：// www。 jqueryscript.net/slider/Responsive-jQuery-Full-Width-Image-Slider-Plugin-responsiveSlides.html [ ^ ] ...它完全符合我的需求。现在我只想为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 >
解决方案
（function（）{
var p =
（'#content'）。responsiveSlides（{
height：450，//幻灯片竞赛高度
背景：'＃fff'，//背景颜色和覆盖层的颜色到foutout on init
autoStart：true，// boolean autostart
startDelay：0，// start whit delay
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 =右下角
* /
保证金：10，//分页保证金
dotStyle：''，// dot分页类样式
dotStyleHover：''，// dot分页班级悬停式
dotStyleDisable：''// dot pagination class disable style
}
]
}）;
}）;
< / 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> 解决方案
(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中为每个图像添加标题文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
