jquery carouselLite不是workig但我想一切都好 [英] jquery carouselLite is not workig but i guess everything is ok

问题描述

i want to do a basic jquery to a photo gallery, i want to have some images and two buttons to show next images and previous images. Im trying to do it with jcarousellite but nothing happens but i guess everything is ok!

This is my jquery script:

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


   <script type="text/javascript">
        $(document).ready(function() {
            $("#images").jCarouselLite({
              btnNext: "#prevBTN",
              btnPrev: "#nextBTN",
              visible: 1
            })
        });

    </script>

This is my html code:

 <div id="mainCenterContainer">

  <h1>Design<span>Gallery</span></h1>

  <div class="fr" id="nextBTN"><img src="images/nexticon.png" width="40" height="40" alt="Next" title="Next">  </div>
  <div class="fr" id="prevBTN"><img src="images/previousbutton.png" width="40" height="40" alt="Back" title="Back"></div>

<div class="cr"></div>
     <div id="images">
        <ul>
            <li>
                <img src="images/pic4.jpg" alt="Image" title="Image 1"</a>
                <img src="images/pic4.jpg" alt="Image" title="Image 2"</a>
                <img src="images/pic4.jpg" alt="Projecto Image" title="Image 3"</a>
                <img class="removeMargin" src="images/pic4.jpg" alt="Image" title="Projecto 4"</a>
                <img src="images/pic4.jpg" alt="Projecto Image" title="Image 5"</a>
                <img src="images/pic4.jpg" alt="Projecto Image" title="Image 6"</a>
                <img src="images/pic4.jpg" alt="Projecto Image" title="Image"</a>
                <img class="removeMargin" src="imagens/pic4.jpg" alt="Image" title="Projecto 8"</a>
            </li>

            <li>
                <img src="images/pic4.jpg" alt="Image" title="Image 1"</a>
                <img src="images/pic4.jpg" alt="Image" title="Image 2"</a>
                <img src="images/pic4.jpg" alt="Image" title="Image 3 "</a>
                <img class="removeMargin" src="imagens/pic4.jpg" alt="Image" title="Image"</a>
                <img src="images/pic4.jpg" alt="Image" title="Image"</a>
                <img src="images/pic4.jpg" alt="Image" title="Image "</a>
                <img src="images/pic4.jpg" alt="Image" title="Image "</a>
                <img class="removeMargin" src="images/pic4.jpg" alt="Image" title="Image"</a>
            </li>
         </ul>


 </div>

推荐答案

（文件）.ready（function（）{

(document).ready(function() {

（＃images）。jCarouselLite（{
btnNext：＃prevBTN，
btnPrev：＃nextBTN，
visible：1
}）
}）;

< / script >

这是我的html代码：

< div id = mainCenterContainer >

< h1 > 设计< span > 图库 < / span > < / h1 >

< div class = fr id = nextBTN > < img src = images / nexticon.png width = 40 height = 40 alt = 下一步 title = 下一步 > < / div >
< div class = fr id = prevBTN > < img src = images / previousbutton.png width = 40 height = < span class =code-keyword> 40 alt = 返回 title = 返回 > < / div >

< div class = cr < span class =code-keyword>> < / div >
< div id = 图片 >
< ul >
< li >
< img src = images / pic4.jpg alt = 图片 < span class =code-attribute> title = 图片1 < / a >
< span class =code-keyword>< img src = images / pic4.jpg alt = 图像 title = 图像2 < / a >
< img src = images / pic4 .jpg alt = Projecto图像 title = 图片3 < / a < span class =code-keyword>>
< img class = removeMargin src = images / pic4.jpg alt = 图片 < span class =code-attribute> title = Projecto 4 < / a >
< span class =code-keyword>< img src = images / pic4.jpg alt = Projecto Image title = 图片5 < / a >
< img src = images / pic4.jpg alt = Projecto图像 title < span class =code-keyword> = 图片6 < / a >
< img src = images / pic4.jpg alt = Projecto Image title = 图片 < / a >
< ; img class < span class =code-keyword> = removeMargin src = ima gens / pic4.jpg alt = 图片 title = Projecto 8 < / a >
< / li >

< li >
< img src = images / pic4.jpg alt = 图片 title = 图片1 < / a >
< img src = images / pic4.jpg alt = 图片 title = 图片2 < / a >
< img src = images / pic4.jpg alt = Image\" title=\" Image 3 \"</a> ;
<img class=\"removeMargin\" src=\"imagens/pic4.jpg\" alt=\"Image\" title=\"Image\"</a>
<img src=\"images/pic4.jpg\" alt=\"Image\" title=\"Image\"</a>
<img src=\"images/pic4.jpg\" alt=\"Image\" title=\"Image \"</a>
<img src=\"images/pic4.jpg\" alt=\"Image\" title=\"Image \"</a>
<img class=\"removeMargin\" src=\"images/pic4.jpg\" alt=\"Image\" title=\"Image\"</a>
</li>
</ul>


</div>

("#images").jCarouselLite({ btnNext: "#prevBTN", btnPrev: "#nextBTN", visible: 1 }) }); </script> This is my html code: <div id="mainCenterContainer"> <h1>Design<span>Gallery</span></h1> <div class="fr" id="nextBTN"><img src="images/nexticon.png" width="40" height="40" alt="Next" title="Next"> </div> <div class="fr" id="prevBTN"><img src="images/previousbutton.png" width="40" height="40" alt="Back" title="Back"></div> <div class="cr"></div> <div id="images"> <ul> <li> <img src="images/pic4.jpg" alt="Image" title="Image 1"</a> <img src="images/pic4.jpg" alt="Image" title="Image 2"</a> <img src="images/pic4.jpg" alt="Projecto Image" title="Image 3"</a> <img class="removeMargin" src="images/pic4.jpg" alt="Image" title="Projecto 4"</a> <img src="images/pic4.jpg" alt="Projecto Image" title="Image 5"</a> <img src="images/pic4.jpg" alt="Projecto Image" title="Image 6"</a> <img src="images/pic4.jpg" alt="Projecto Image" title="Image"</a> <img class="removeMargin" src="imagens/pic4.jpg" alt="Image" title="Projecto 8"</a> </li> <li> <img src="images/pic4.jpg" alt="Image" title="Image 1"</a> <img src="images/pic4.jpg" alt="Image" title="Image 2"</a> <img src="images/pic4.jpg" alt="Image" title="Image 3 "</a> <img class="removeMargin" src="imagens/pic4.jpg" alt="Image" title="Image"</a> <img src="images/pic4.jpg" alt="Image" title="Image"</a> <img src="images/pic4.jpg" alt="Image" title="Image "</a> <img src="images/pic4.jpg" alt="Image" title="Image "</a> <img class="removeMargin" src="images/pic4.jpg" alt="Image" title="Image"</a> </li> </ul> </div>

I found the problem, its because when we need to use many jquery functions i guess we need to do the import

<script type=\"text/javascript\" src=\"jcarousellite_1.0.1.min.js\"></script> before our function that needs this import!

Thanks!

I found the problem, its because when we need to use many jquery functions i guess we need to do the import
<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script> before our function that needs this import!
Thanks!

这篇关于jquery carouselLite不是workig但我想一切都好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！