HTML中的連續滑塊圖像

我需要創建一個滑塊，使圖像連續移動。我已經使用flexslider，但它從第一頁移動到下一個，而我需要它是連續的。HTML中的連續滑塊圖像

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

來源

2014-03-12 user2480288

你只是想讓我們爲你做這個？ – PHPglue

'directionNav：true，'逗號是一個錯誤。你應該開始使用一些調試工具 –

如果你想有一個滑塊，將持續在一個循環中移動你的圖片，我建議從這裏下載的jQuery 任何滑塊：http://css-tricks.com/anythingslider-jquery-plugin/

在您下載它，使用下面的代碼：

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

您可以將您需要的圖像的數量，但我平時堅持使用4或5

不要忘記從上面的鏈接下載的CSS文件。你將需要'anythingslider.css'!!!

希望這會有所幫助！

來源

2014-03-13 02:39:09

HTML中的連續滑塊圖像

回答

相關問題