簡體   English   中英

圖像滑塊和jquery的循環插件不能一起工作

[英]image slider and a cycle plugin of jquery not working together

這里我使用的是圖像滑塊和jquery的循環插件。 但只有其中一個工作的代碼放在上面。 問題出在哪兒 ? 下面提到了幾個頭部內容的代碼。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/easySlider1.7.js" type="text/javascript"></script>

  <link href="css/jq.css" rel="stylesheet" type="text/css" />
<link href="css/cycle.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>

 $(document).ready(function () {

     $('#s1').cycle({
         fx: 'scrollDown',
         speedIn: 2000,
         speedOut: 500,
         easeIn: 'easeInCirc',
         easeOut: 'easeOutBounce',
         delay: -2000
     });

         $("#slider").easySlider({
             auto: true,
             continuous: true,
             nextId: "slider1next",
             prevId: "slider1prev"
         });



 });

<link href="css/screen.css" rel="stylesheet" type="text/css" />

滑塊代碼

    <div id="slider" >
        <ul>                
            <li><a href="http://templatica.com/preview/30"><img src="images/01.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/7"><img src="images/02.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/25"><img src="images/03.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/26"><img src="images/04.jpg" alt="Css Template Preview" /></a></li>
            <li><a href="http://templatica.com/preview/27"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>          
        </ul>

    </div>
     <div class="clear">
     </div>
 </div>

和循環插件html

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" alt="" />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" alt=""  />

        <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" alt="" />

    </div>

包含順序可能很重要,您有一​​個重復的jquery.js 試試這個訂單:

<link href="css/jq.css" rel="stylesheet" type="text/css" />
<link href="css/cycle.css" rel="stylesheet" type="text/css" />

<script src="Scripts/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script><script src="js/easySlider1.7.js" type="text/javascript"></script>
<script src="js/chili-1.7.pack.js" type="text/javascript"></script>

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM