Javascript jQuery循环:如何添加标题、标题和自定义寻呼机图像
我能够让jquerycycle动态生成我想要的图像。然而,如何在幻灯片的左下角添加自定义寻呼机(使用图像精灵)、标题和标题框/水印(opacyJavascript jQuery循环:如何添加标题、标题和自定义寻呼机图像,javascript,jquery,slider,cycle,jquery-cycle,Javascript,Jquery,Slider,Cycle,Jquery Cycle,我能够让jquerycycle动态生成我想要的图像。然而,如何在幻灯片的左下角添加自定义寻呼机(使用图像精灵)、标题和标题框/水印(opacyrgba(0.0.0.04))却让我摸不着头脑 图像数组已将标题分配给图像的alt,将标题分配给图像的title,如下所示: 以下是JSFIDLE: 我想实现类似的目标 但我不需要(下一个/上一个)控件 我无法显示寻呼机,更不用说其他定制>_< 我非常感谢你的帮助 虽然我正在使用JSFIDLE,但为了方便起见,我仍然添加了代码;-) HTML: JS: v
rgba(0.0.0.04)
)却让我摸不着头脑
图像数组已将标题分配给图像的alt
,将标题分配给图像的title
,如下所示:
以下是JSFIDLE:
我想实现类似的目标
但我不需要(下一个/上一个)控件
我无法显示寻呼机,更不用说其他定制>_<
我非常感谢你的帮助
虽然我正在使用JSFIDLE,但为了方便起见,我仍然添加了代码;-)
HTML:
JS:
var$banner=//整个数据都在JSFIDLE中
$(文档).ready(函数(){
$()追加(“”)
($i=0;$i<$banner.length;++$i)的{
$('#banner')。附加('');
}
$('#banner')。循环({
外汇:“淡出”,
超时:1500,
速度:4000,
寻呼机:“#寻呼机”,
});
}))
==编辑(2012年11月21日)===
最后修订:
谢谢! 在您的
JS:
关于寻呼机,cycle有回调函数来生成寻呼机,所以我只生成了与其他插件相同的元素:
我刚刚在html中添加了
太棒了!自定义寻呼机呢?我没能添加一个,更不用说用图像精灵来定制了…我期待着做这个,和你的样品一样。顺便说一句,这里是paginator元素回调,我注意到您也在标题中添加了标题,但我只看到标题…您还需要显示标题吗?在哪里?我得到了标题:,但是,标题不是粗体此外,我仍在尝试添加自定义页面最终版本:
<!-- #gallery.banner -->
<div id="banner">
</div>
<!-- /#gallery.banner -->
@charset "utf-8";
#banner {
width: 550px;
height: 225px;
float:left;
box-shadow: -2px 15px 50px 10px #888888;
}
#banner a {
margin: 0;
padding: 0;
color: #fff;
}
#banner img {
width: 550px;
height: 220px;
border: 2px solid #DBDBDB;
border-radius: 4px;
padding: 4px;
background-color: #F3F3F3;
}
/* Pager CSS */
#banner #pager.active {
width:12px;
height:13px;
background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px -12px;
}
#banner #pager.inactive {
width:12px;
height:13px;
background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px 0px;
}
/* Watermark CSS */
#banner #watermark {
background-color: #000000;
background-color: rgba(0.0.0.04);
}
#banner #watermark #title {
color: #FFFFFF;
font-weight: bold;
}
#banner #watermark #caption {
color: #FFFFFF;
font-weight: normal;
}
for( $i = 0; $i < $banner.length; ++$i){
$('#banner').append('<a href="' + $banner[$i].link + '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="' + $banner[$i].titile + '" /></a>');
}
$('#banner').cycle( {
fx: 'fade',
timeout: 1500,
speed: 4000,
pager: "#pager",
});
for( $i = 0; $i < $banner.length; ++$i){
$('#banner').append('<a href="' + $banner[$i].link
+ '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="'
+ $banner[$i].titile
+ '" /><div class="caption" style="bottom:0">'
+ $banner[$i].caption + '</div></a>');
}
a .caption {
margin-top: -10px;
color:white;
text-decoration: none;
position: absolute;
text-align: center;
background: black;
opacity: 0.6;
width: 100%;
}
$('#banner').cycle( {
fx: 'fade',
timeout: 15000,
speed: 400,
pager: "#pager",
//build new pager!
pagerAnchorBuilder: function(index,dom) {
console.log(index,dom);
return "<li><a href='#'>"+index+"</li>";
}
});
#pager {
margin:0px auto 0;
top: 30px;
width:100px;
position: relative;
z-index: 1005;
}
#pager li {
float:left;
margin:0 1px;
}
#pager li a {
display:block;
width:12px;
height:0;
padding-top:12px;
float:left;
overflow:hidden;
background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
background-position:0 0;
}
#pager li.activeSlide a {
background-position:0 -12px;
}