Javascript HTML中图像的连续滑块

我需要创建一个滑块，图像在其中连续移动。 我使用了flexslider，但它会从第一页移动到下一页，相反，我需要它是连续的

<script type="text/javascript">

    $(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide", // set animation to slide
        animationLoop: true,
        itemWidth: 120,
        itemMargin: 20,
        minItems: 1,
        maxItems: 5,
        smoothheight: true,
        directionNav: true,
      });
    });
</script>

<style type="text/css">
.flexslider{
    background:none;
    border:none;
    box-shadow:none;
    margin:10px;
    }    
   </style>

<div class="flexslider">
  <ul class="slides">
    <li><img alt="" src="images/1.jpg" /></li>
    <li><img alt="" src="images/2.jpg" /></li>
    <li><img alt="" src="images/3.jpg" /></li>
    <li><img alt="" src="images/4.jpg" /></li>
    <li><img alt="" src="images/5.jpg" /></li>
    <li><img alt="" src="images/6jpg" /></li>
    <li><img alt="" src="images/7.jpg" /></li>
    <li><img alt="" src="images/8.jpg" /></li>
    <li><img alt="" src="images/9.jpg" /></li>
  </ul>
</div>

$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider({
动画：“幻灯片”，//将动画设置为幻灯片
animationLoop:true，
项目宽度：120，
项目保证金：20，
最小项：1，
最大项目：5，
平滑高度：正确，
方向导航：对，
});
});
.柔性滑块{
背景：无；
边界：无；
盒影：无；
利润率：10px；
}    

如果您想要一个能够在循环中连续移动图像的滑块，我建议您从这里下载jQuery任意滑块：

下载后，请使用以下代码：

jQuery：

<script src="_js/jquery-1.7.2.min.js"></script>
<script src="_js/jquery.anythingslider.min.js"></script>

<script>

$(document).ready(function() {
$('#slider').anythingSlider({
    buildArrows : true,
    autoPlay : true, // THIS MUST BE SET TO TRUE FOR YOUR SLIDER TO LOOP
    buildStartStop : false,
    resizeContents: false   
});

});  // end ready

</script>

$（文档）.ready（函数（）{
$（“#滑块”）。任意滑块({
建筑箭头：是的，
autoPlay:true，//必须将该值设置为true，滑块才能循环
buildStartStop:false，
resizeContents:false
});
});  // 准备就绪

HTML:

你可以插入你需要的图像数量，但我通常坚持4或5

别忘了从上面的链接下载CSS文件。您将需要“anythingslider.css”

---

希望这有帮助

你只是想让我们帮你做这个吗？

directionNav:true，

那个逗号是个错误。你应该开始使用一些调试工具

<div id="slider">
    <div class="slidePanel"><a href ='#'>

  // YOU CAN ADJUST THE WIDTH AND HEIGHT OF YOUR IMAGES
<p>
<img src="INSERT IMAGE SOURCE 1" alt="SomePic1" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>   
</a></div>

<div class="slidePanel"><a href ='#'>


<p>
<img src="INSERT IMAGE SOURCE 2" alt="SomePic2" width="120" height="150" class="imgLeft"> INSERT INFORMATION ABOUT IMAGE HERE
</p>   
</a></div>

</div>