Javascript Jcarousel突出显示第一张可见照片
这里有一个更难的挑战 单击我的JSFIDLE: 我用这个做相册。我想在用户点击图片时突出显示该项目。完成了 以下是触发相册的功能:Javascript Jcarousel突出显示第一张可见照片,javascript,jquery-ui,jquery-plugins,jquery,Javascript,Jquery Ui,Jquery Plugins,Jquery,这里有一个更难的挑战 单击我的JSFIDLE: 我用这个做相册。我想在用户点击图片时突出显示该项目。完成了 以下是触发相册的功能: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <he
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--<link rel="stylesheet" type="text/css" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />-->
<style>
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: #F0F6F9;
border: 1px solid #346F97;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 300px;
padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-container-vertical {
width: 75px;
height: 245px;
padding: 40px 20px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 300px;
height: 75px;
overflow:hidden;
}
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-left: 0;
margin-right: 10px;
}/*
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal {
margin-left: 10px;
margin-right: 0;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
} */
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-next-horizontal {
left: 5px;
right: auto;
background-image: url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-prev-horizontal {
left: auto;
right: 5px;
background-image: url(next-horizontal.png);
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-horizontal:focus {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:focus,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
</style>
<script>
$(document).ready(function(){
jQuery('#mycarousel').jcarousel({
scroll:2,
animation:'slow',
wrap:'last',
initCallback:function(){
$("#mycarousel li:eq(0)").css('border','2px solid gray');
}
});
$("#mycarousel li").click(function(){
$("#mycarousel li").css('border','none');
$(this).css('border','2px solid gray');
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="75" height="75" alt="" /></li>
<li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="75" height="75" alt="" /></li>
</ul>
</ul>
</body>
</html>
.jcarousel skin tango.jcarousel容器{
-moz边界半径:10px;
-webkit边界半径:10px;
边界半径:10px;
背景#F0F6F9;
边框:1px实心#346F97;
}
.jcarousel skin tango.jcarousel容器水平{
宽度:300px;
填充:20px 40px;
}
.jcarousel skin tango.jcarousel容器垂直{
宽度:75px;
高度:245px;
填充:40px 20px;
}
.jcarousel skin tango.jcarousel水平夹{
宽度:300px;
高度:75px;
溢出:隐藏;
}
.jcarousel皮肤探戈.jcarousel项目{
宽度:75px;
高度:75px;
}
.jcarousel皮肤探戈。jcarousel项目水平{
左边距:0;
右边距:10px;
}/*
.jcarousel皮肤探戈。jcarousel方向rtl。jcarousel项目水平{
左边距:10px;
右边距:0;
}
.jcarousel皮肤探戈.jcarousel项目占位符{
背景:#fff;
颜色:#000;
} */
/**
*水平按钮
*/
.jcarousel皮肤探戈。jcarousel下一水平{
位置:绝对位置;
顶部:43px;
右:5px;
宽度:32px;
高度:32px;
光标:指针;
背景:透明url(http://sorgalla.com/projects/jcarousel/skins/tango/next-horizontal.png)不重复0;
}
.jcarousel皮肤探戈.jcarousel方向rtl.jcarousel下一水平{
左:5px;
右:自动;
背景图片:url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png);
}
.jcarousel skin tango.jcarousel下一个水平方向:悬停,
.jcarousel skin tango.jcarousel下一水平:聚焦{
背景位置:-32px0;
}
.jcarousel skin tango.jcarousel下一水平:活动{
背景位置:-64px 0;
}
.jcarousel skin tango.jcarousel下一个禁用水平,
.jcarousel skin tango.jcarousel下一个禁用水平:悬停,
.jcarousel skin tango.jcarousel下一个禁用水平:聚焦,
.jcarousel skin tango.jcarousel下一个禁用水平:活动{
游标:默认值;
背景位置:-96px 0;
}
.jcarousel skin tango.jcarousel prev水平{
位置:绝对位置;
顶部:43px;
左:5px;
宽度:32px;
高度:32px;
光标:指针;
背景:透明url(http://sorgalla.com/projects/jcarousel/skins/tango/prev-horizontal.png)不重复0;
}
.jcarousel皮肤探戈。jcarousel方向rtl。jcarousel上一水平{
左:自动;
右:5px;
背景图片:url(next horizontal.png);
}
.jcarousel skin tango.jcarousel prev水平:悬停,
.jcarousel skin tango.jcarousel prev水平:焦点{
背景位置:-32px0;
}
.jcarousel skin tango.jcarousel prev水平:活动{
背景位置:-64px 0;
}
.jcarousel skin tango.jcarousel prev禁用水平,
.jcarousel skin tango.jcarousel prev已禁用水平:悬停,
.jcarousel skin tango.jcarousel prev禁用水平:聚焦,
.jcarousel skin tango.jcarousel prev已禁用水平:活动{
游标:默认值;
背景位置:-96px 0;
}
$(文档).ready(函数(){
jQuery(“#mycarousel”).jcarousel({
卷轴:2,
动画:'慢',
包装:'最后',
initCallback:function(){
$(“#mycarousel li:eq(0)”).css('border','2px solid gray');
}
});
$(“#mycarousel li”)。单击(函数(){
$(“#mycarousel li”).css('border','none');
$(this.css('border','2px solid gray');
});
});
无标题文件
现在,我想要的是,每当用户单击下一个或上一个箭头时,第一个visigble项都应该用边框高亮显示
是否可以使用适当的配置来执行此操作?下面是插件文档的链接
我为高亮显示的图像添加了一个用户定义的类
current
,并基于具有此current
类的元素,使用另外两个单击事件,管理下一个和上一个按钮的高亮显示
以下是工作脚本:
$(document).ready(function(){
jQuery('#mycarousel').jcarousel({
scroll:2,
animation:'slow',
wrap:'last',
initCallback:function(){
$("#mycarousel li:eq(0)").css('border','2px solid gray');
$("#mycarousel li:eq(0)").addClass("current");
}
});
$("#mycarousel li").click(function(){
$("#mycarousel li").css('border','none');
$("#mycarousel li").removeClass('current');
$(this).css('border','2px solid gray');
$(this).addClass('current');
});
$(".jcarousel-next-horizontal").click(function(){
$(".current").css('border', 'none');
$(".current").next().css('border', '2px solid gray');
$(".current").removeClass('current').next().addClass('current');
});
$(".jcarousel-prev-horizontal").click(function(){
$(".current").css('border', 'none');
$(".current").prev().css('border', '2px solid gray');
$(".current").removeClass('current').prev().addClass('current');
});
});
jcarousel和css文件不能加载到JSFIDLE上。@MateiMihai,它可以:)请检查JSFIDLE中的示例。也许你可以。。但是我不禁止您在该服务器上访问/projects/jcarousel/lib/jquery.jcarousel.min.js。。插件不起作用,因为+1是的。我看见了。你能在你的机器上的空白html页面中添加js和css来查看这个工作插件吗?@MateiMihai,请获取所有有问题的html。