1
如何制作循环图像滑块? 以下是我的图片幻灯片演示代码。我想要制作幻灯片放映循环,即最后一个图像出现时,点击下一个按钮,第一个图像应该再次出现。 我的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>
http://jsfiddle.net/ffy7y7ck/。看看这个小提琴。这是我如何制作图像滑块的方式。我希望它能帮助你使用图像滑块。我用jquery为这个 – Vinc199789
thnaks快速回复。但我需要通过修改baove代码来解决问题。你能帮我吗 –
你可以做一个小提琴吗?比我可以看到什么问题 – Vinc199789