个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这里有一个更艰巨的挑战。
点击我的jsfiddle Here :
我正在使用这个 jQuery plugin一张专辑。每当用户单击图片时，我都想突出显示该项目。完成了!
下面是触发相册的函数:
<!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>
现在，我想要的是每当用户单击下一个或上一个箭头时，第一个可见项目应该用边框突出显示。
可以使用适当的配置来完成这项工作吗？以下是插件文档的链接 http://sorgalla.com/projects/jcarousel/#Configuration
最佳答案
我添加了一个用户定义的类 current对于突出显示的图像，并根据具有此 current 的元素管理下一张或上一张图像的突出显示类，使用 2 个更多的点击事件，next 和 prev 按钮。
这是工作脚本:
$(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');
});
});
关于javascript - Jcarousel 突出显示第一张可见照片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14277904/
25
4
0
我正在使用 jCarousel 在我的页面中显示图像轮播。它工作得很好，我没有提示，但我正在使用页面上的选项卡，当我转到另一个选项卡时，出现一个丑陋的 jCarousel 错误。基本上我想做的是当我进
我在我的项目中使用 jcarousel 插件。我使用以下函数来实现产品 slider 的分页 actualizePagination: function(element) { var jcar
我目前正在使用 JCarousel 来突出显示 Wordpress 中的“特色帖子”。轮播显示在首屏上方，作为标题的一部分。一旦加载，它就可以很好地工作，但由于我们在包含许多元素的大页面的首屏上方使用
我知道这个问题的明显答案是检查 jquery 和 jcarousel 脚本是否正确加载，但我可以在浏览器调试器中看到资源，因此认为这不是问题所在。我似乎无法让它运行脚本: j
我在我开发的网站的主页上遇到了 Javascript 错误。主页上有一个 jCarousel 滚动条，可以在配置文件之间滚动。 错误如下: this.clip[0] is undefined 位于 j
JCarousel 最近发生了变化(2011 年 1 月)。 它曾经有一种方法可以通过自动滚动实现悬停暂停。 在新版本中，我无法解决如何让自动滚动在悬停时停止: 我希望滚动在鼠标悬停时停止并在鼠标移出
我正在将 jCarousel 插件用于小型图库页面，并使用 itemloadcallback 参数动态加载轮播上的项目。 但是，我不确定这是否可能，但是有没有办法可以删除页面本身上的轮播实例并使用新的
我在设置 jCarousel 时遇到了一些问题 - www.lovejungle.com/store 基本上我希望它看起来像 www.ripcurl.com.au/?home 上的幻灯片 我已经实现了
我是一名图形设计师，我正在尝试使用一些精彩的 jquery 脚本来编写我的新作品集。我想让 jcarousel (http://sorgalla.com/projects/jcarousel/) 在鼠
我的 jquery jcarousel 插件有问题。如果我不使用“itemFallbackDimension”属性，我会收到一条错误消息“jCarousel:没有为项目设置宽度/高度。这将导致无限循环
如何修改此 jCarousel 示例，以便单击左按钮或右按钮时，轮播将继续朝该方向滚动:http://sorgalla.com/projects/jcarousel/examples/static_a
已成功添加 jcarousel 来浏览我的使用动态模板构建的 html 网站。但是，当我位于链接到的页面上时，我需要一个图像链接显示为事件状态，以便查看者知道他们在哪里。另外，每当我进入新页面时，当我
我需要做类似的事情: jQuery('#ImgCarousel').jcarousel({}); jQuery('#ImgCarouselCon').hide(); ImgCarouselCon 是包
我正在使用插件 jCarousel ( http://sorgalla.com/projects/jcarousel/ )，而不是图像滑入(如“带有自动滚动的轮播”演示) 我希望图像淡入。用法是一个自
var carousel = jQuery('#mycarousel').data('jcarousel'); var index = carousel.size() + 1; carouse
$(function() { $('.jcarousel') .jcarousel({ auto: 1, animation: { duration: 3000, easing: 'linear
我正在使用 jCarousel 插件，但遇到了障碍... 我需要旋转木马在导航按钮悬停时不断滚动。将内置配置变量更改为“鼠标悬停”每次悬停仅滚动一次。 我遇到了 this similar questi
这里有一个更艰巨的挑战。 点击我的jsfiddle Here : 我正在使用这个 jQuery plugin一张专辑。每当用户单击图片时，我都想突出显示该项目。完成了! 下面是触发相册的函数:
我有一个自动完成的文本输入，它使用 jcarousel 触发一个 slider 来滚动到所选人物的图像。问题是，如果您搜索一次，它会起作用，但再次搜索会使所有图像消失。 下面是控制输入的代码: jQu
我想在 jcarousel 中显示大约 6 个项目，问题是每当jcarousel 可用的项目少于 6 个，它只是与项目。就像，如果我有 3 个项目，它们会相互重叠或分开很远。 我做错了什么？如果我们有
我是一名优秀的程序员,十分优秀！