HTML中的连续图像滑块

I need to create a slider in which the images moves continuous. I have used flexslider but it moves from first page to next, instead i need it to be continuous.

我需要创建一个图像连续移动的滑块。我使用了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>

1 个解决方案

#1

If you want a slider that will continuously move your images in a loop, I recommend downloading the jQuery Anything Slider from here: http://css-tricks.com/anythingslider-jquery-plugin/

如果你想要一个可以循环移动图像的滑块,我建议你从这里下载jQuery Anything Slider:http://css-tricks.com/anythingslider-jquery-plugin/

After you download it, use the following code:

下载后,使用以下代码:

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>

HTML:

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

You can insert the number of images that you need but I usually stick with 4 or 5.

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

Don't forget to download the CSS File from the link above. You will need 'anythingslider.css'!!!

不要忘记从上面的链接下载CSS文件。你需要'anythingslider.css'!!!

Hope this helps!

希望这可以帮助!

#1