Question

我想在同一页面中使用jQuery轮播。这些轮播使用两个不同版本的jQuery，我无法让它们同时工作

这是我的代码

<!DOCTYPE HTML>
<!-- Website template by freewebsitetemplates.com -->
<html>
<head>
    <meta charset="UTF-8">
    <title>TEST</title>

<link rel="stylesheet" href="css/smoothslides.theme.css">                   
<link rel="stylesheet" href="css/infinite_carousel/simple-list.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/infinite_carousel/periscope-theme-switcher.css" type="text/css" media="screen" />  

</head>
<body>
<div>test</div>

                    <div id="slide" style="width:300px;height:300px;" >

                <div class="ss-slides">
    <div class="ss-slide">
        <img src="images/1.jpg" />
    </div>
    <div class="ss-slide" title="Caption">
        <img src="images/2.jpg" />
    </div>
     <div class="ss-slide" title="Caption">
        <img src="images/3.jpg" />
    </div>
</div>

            </div>  


<div class="demo">
        <h2 class="hl">Advanced example, courtesy <a href="http://www.byperiscope.com">Periscope Creations</a></h2>
            <div id="sliderBloc">
                <a id="previous">Previous</a>
                <div style="" id="slider-stage">
                    <div style="width: 512px;" id="slider-list">
                        <a class="theme"><img src="css/infinite_carousel/theme1.png" alt="Periscope angels " height="120" width="120" /><span class="nameVignette">Periscope angels </span><span class="changeTheme">changer le thème</span></a>
                        <a class="theme"><img src="css/infinite_carousel/theme2.jpg" alt="ice-cream mountains" height="120" width="120" /><span class="nameVignette">ice-cream mountains</span><span class="changeTheme">changer le thème</span></a>
                    </div>
                </div>
                <a id="next">Next</a>
            </div>
        </div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script>
    var $j_183 = jQuery.noConflict();
    alert($j_183.fn.jquery);
</script> 

<script src="js/jquery-1.3.2.min.js"></script>
<script>
    var $j_132 = jQuery.noConflict();
     alert($j_132.fn.jquery);
</script> 

<script type="text/javascript" src="js/smoothslides.min.js"></script>

<script type="text/javascript" src="js/jquery.infinite-carousel.js"></script>

     <script type="text/javascript">    

       $j_183(window).load( function() {
            $j_183(document).smoothSlides({
            duration: 4000
        //     options seperated by commas 
            });
        });     

    $j_132(document).ready(function(){              
                $j_132('#viewport').carousel('#simplePrevious', '#simpleNext');  
                $j_132('#slider-stage').carousel('#previous', '#next');
            });

  </script>

</body>

</html>

第二个旋转木马与1.3.2版本完美配合，但第一个不起作用，我有这个错误：

未捕获的TypeError：undefined不是函数

在这一行：

        $j_183(document).smoothSlides({

如何解决这个问题，知道警报对话框显示正确的版本

Answer 1

包含最新版本的jQuery，然后添加 jQuery migrate 以支持旧版本代码。实施例。

<!-- Latest version -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>

<!-- jQuery Migrate -->
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Use your script for both slider -->
<script>
//Your code
</script>

https://jquery.com/download/#jquery-migrate-plugin

在同一页面中使用两个不同版本的jQuery轮播

1 个答案: