如何製作循環圖像幻燈片？

如何製作循環圖像滑塊？以下是我的圖片幻燈片演示代碼。我想要製作幻燈片放映循環，即最後一個圖像出現時，點擊下一個按鈕，第一個圖像應該再次出現。我的JS是這樣如何製作循環圖像幻燈片？

function worksCarousel(){ 
var totalWorks = $(".wrapper-project ul li").length; 
var ampleWork = $(".project-content").width(); 
var ampleTotalWorks = totalWorks*ampleWork; 
$('.wrapper-project ul').css('width',ampleTotalWorks) 

var fragment = document.createDocumentFragment(), 
li = document.createElement('li'); 
while (totalWorks--) { 
    fragment.appendChild(li.cloneNode(true)); 
} 

$('.controller-3 ul').append(fragment); 

var index3 = 0; 
var pos3 = 1; 
$('.controller-3 ul li:first-child').addClass('selected'); 

$(".controller-3 ul li").click(function(){ 
    index3 = $(this).index(); 
    $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow'); 
    $('.controller-3 ul li').removeClass('selected'); 
    $(this).addClass('selected'); 
    //alert(ampleitem); 
}); 
$(".w-next").click(function(){ 
     if(index3 != $(".controller-3 ul li").size()-1){ 
      index3++; 
      $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow'); 
      pos3++; 
      $('.controller-3 ul li.selected').removeClass('selected').next().addClass('selected'); 
    } 
    }); 
$(".w-prev").click(function(){ 
    if(index3!=0){ 
     index3--; 
     $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow'); 
     pos3--; 
     $('.controller-3 ul li.selected').removeClass('selected').prev().addClass('selected'); 
    } 
}); 
}

和我的HTML代碼

<div class="nav-work"> 
<div class="w-prev">Next</div> 
<div class="w-next">Prev</div> 
</div> 
<div class="wrapper-project"> 
<ul> 
    <li><img alt="" src="{tag_portfolio image 1_value}" /></li> 
    <li><img alt="" src="{tag_portfolio image 2_value}" /></li> 
    <li><img alt="" src="{tag_portfolio image 3_value}" /></li> 
    <li><img alt="" src="{tag_portfolio image 4_value}" /></li> 
    <li><img alt="" src="{tag_portfolio image 5_value}" /></li> 
</ul> 
</div> 

</div> 


</div>

來源

2014-12-28 Ishfaq Muzaffar

http://jsfiddle.net/ffy7y7ck/。看看這個小提琴。這是我如何製作圖像滑塊的方式。我希望它能幫助你使用圖像滑塊。我用jquery爲這個 – Vinc199789

thnaks快速回復。但我需要通過修改baove代碼來解決問題。你能幫我嗎 –

你可以做一個小提琴嗎？比我可以看到什麼問題 – Vinc199789

一個簡單的解決方案，可以給思想情況如下：

存放在數組的容器圖像或想要顯示的圖像。
保持當前圖像的索引顯示在變量中。
更新每當用戶單擊prev或next時顯示的索引和圖像的值。

fiddle

var images_li = $(".wrapper-project ul li").toArray(), current_img = 0; 
$(images_li[current_img]).show(); 

$(".btn-prev").click(function(){ 
    $(images_li[current_img]).hide(); 
    current_img = (current_img === 0) ? images_li.length - 1 : current_img - 1; 
    $(images_li[current_img]).show(); 
}); 

$(".btn-next").click(function(){ 
    $(images_li[current_img]).hide(); 
    current_img = (current_img === images_li.length-1) ? 0 : current_img + 1; 
    $(images_li[current_img]).show(); 
});

來源

2014-12-28 10:48:51 acontell

如何製作循環圖像幻燈片？

回答

相關問題