将图像旋转器与 jcarousel 一起使用
我试图将两个 jquery 插件集成在一起但没有成功，我使用的两个插件是： 简单的jcarousel & 图像旋转器，下面是代码片段：
<script type="text/javascript">
$(document).ready(function () {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function () {
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function () {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250);
//$(".main_image img").attr({ src: imgTitle, alt: imgAlt });
//
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}).hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function () {
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
}); //Close Function
</script>
<script type="text/javascript"> jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" class="container">
<div class="main_image">
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p> </p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<a href="#"><img src="images/nav2a.png" alt="Slowing Dow" /></a>
<div class="block">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
图像旋转器工作正常，但jcarousel 不在图像旋转器内工作，它在图像旋转器之外工作正常，任何帮助或建议或任何其他替代方案将不胜感激，我的 jquery 专业知识 = 初学者。关于我在网站上寻找的东西只是一个图像旋转器，并且在该图像中应该有带有箭头按钮的子页面，例如 jcarousel。
I am trying to integrate two jquery plugins together with no success, The two plugins which i am using is: simple jcarousel & image rotator , below is the code snippet:
<script type="text/javascript">
$(document).ready(function () {
//Show Banner
$(".main_image .desc").show(); //Show Banner
$(".main_image .block").animate({ opacity: 0.85 }, 1); //Set Opacity
//Click and Hover events for thumbnail list
$(".image_thumb ul li:first").addClass('active');
$(".image_thumb ul li").click(function () {
//Set Variables
var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
var imgDesc = $(this).find('.block').html(); //Get HTML of block
var imgDescHeight = $(".main_image").find('.block').height(); //Calculate height of block
if ($(this).is(".active")) { //If it's already active, then...
return false; // Don't click through
} else {
//Animate the Teaser
$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250, function () {
$(".main_image .block").html(imgDesc).animate({ opacity: 0.85, marginBottom: "0" }, 250);
//$(".main_image img").attr({ src: imgTitle, alt: imgAlt });
//
});
}
$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
$(this).addClass('active'); //add class of 'active' on this list only
return false;
}).hover(function () {
$(this).addClass('hover');
}, function () {
$(this).removeClass('hover');
});
//Toggle Teaser
$("a.collapse").click(function () {
$(".main_image .block").slideToggle();
$("a.collapse").toggleClass("show");
});
}); //Close Function
</script>
<script type="text/javascript"> jQuery(document).ready(function () {
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="main" class="container">
<div class="main_image">
<div class="desc">
<a href="#" class="collapse">Close Me!</a>
<div class="block">
<h2>Slowing Down</h2>
<small>04/10/09</small>
<p> </p>
</div>
</div>
</div>
<div class="image_thumb">
<ul>
<li>
<a href="#"><img src="images/nav2a.png" alt="Slowing Dow" /></a>
<div class="block">
<ul id="mycarousel" class="jcarousel-skin-tango">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
Image rotator is working fine but the jcarousel is not working within the image rotator it works fine outside the image rotator , Any help or advice or any other alternative will be appreciated, my jquery expertise = beginner. Regarding the stuff which i m looking for on the website is just a image rotator and within that image there should be subpages with arrow buttons like jcarousel.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您不能直接混合两个插件，因为您必须更改一些代码。
You can't mix two plugins directly, for that you have to change some code.