Question

我正在尝试将两个jquery插件集成在一起但没有成功，我正在使用的两个插件是：simple jcarousel＆amp; image rotator，下面是代码段：

<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。

Answer 1

你不能直接混合两个插件，因为你必须改变一些代码。

使用带有jcarousel的图像旋转器

1 个答案: