jQuery单击幻灯片点击问题

我想创建图像幻灯片使用jQuery。我有4张照片，一个上一个按钮和一个下一个按钮。上一个和下一个按钮正在工作，他们正在移动图像 - = 400px和+ = 400px。但是，我想当我在第一张照片时，用户点击上一个按钮将他带到最后一张照片，如果用户在最后一张照片上，并点击下一个按钮将他带到第一张照片。希望有人可以帮助解决问题jQuery单击幻灯片点击问题

谢谢。

HTML代码：

<div class="images"> 
     <div class="images_inside"> 
      <img src="imgs/model_01.jpg"> 
      <img src="imgs/model_02.jpg"> 
      <img src="imgs/model_04.jpg"> 
      <img src="imgs/model_05.jpg"> 
     </div> 
    </div>

CSS代码：

.images { 
    width:400px; 
    height:400px; 
    border:1px solid #000000; 
    overflow: hidden; 
} 

.images_inside { 
    width:1600px; 
    height:400px; 
} 

.images img { 
    width:400px; 
    height:400px; 
    float:left; 
}

jQuery代码：

$(".next").on("click", function(){ 
    var $a = $(".images .images_inside").css("margin-left", "-=400px"); 
}); 

$(".prev").on("click", function(){ 
    var $b = $(".images .images_inside").css("margin-left", "+=400px"); 
});

来源

2016-04-15 NoName84

PS：我建议你使用CSS3转换而不是'left'或'margin'属性。它更快，更顺畅。同样在你的代码中，没有办法做'var $ a'和'$ b'这些变量是不必要的。 –

是的，我可以删除a和b变量。我只是把它们用于测试目的。 – NoName84

所涉及的数学很简单，
计算tot数量的幻灯片，并使用counter

var $gallery = $(".images_inside"), 
 
    tot = $("> *", $gallery).length, 
 
    counter = 0; 
 

 
$(".prev, .next").on("click", function() { 
 

 
    // Increment/decrement the counter depending on the clicked button: 
 
    counter = $(this).hasClass("next") ? ++counter : --counter; 
 
    // Let's fix the counter loop 
 
    counter = counter<0 ? tot-1 : counter%tot; 
 

 
    // Finally ainmate your gallery using CSS! 
 
    $gallery.css({ 
 
     transition: "0.5s", 
 
     transform: "translateX(-"+ (100*counter) +"%)" 
 
    }); 
 

 
});

.images {overflow:hidden; white-space: nowrap; font-size:0;} 
 
.images_inside>* {width: 100%;display: inline-block; vertical-align:top;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="images"> 
 
    <div class="images_inside"> 
 
    <img src="//placehold.it/400x80/cf5?text=1"> 
 
    <img src="//placehold.it/400x80/f5c?text=2"> 
 
    <img src="//placehold.it/400x80/5ff?text=3"> 
 
    <img src="//placehold.it/400x80/fc5?text=4"> 
 
    </div> 
 
</div> 
 
<button class="prev">&larr;</button> 
 
<button class="next">&rarr;</button>

jsBin demo (compact code version)

来源

2016-04-15 14:59:51

一切正常。谢谢Roko – NoName84

@ NoName84很高兴它的工作！快乐的编码 –

，您可以拨打全球JS变量可以更新，让你知道哪些图片用户当前处于打开状态。然后在你的on click函数中查看这个变量，如果你在第一个图像上并且你点击了前一个，则以不同的方式更新空白以跳转到最后一个图像。最后一张图像上的下一个按钮也一样。

来源

2016-04-15 14:32:01 Nived

感谢您的答复Nived，但有可能输入代码吗？ – NoName84

据我所知，你对jQuery非常新鲜。

即使您要使其工作，您尝试实现此目标的方式也是错误的。

我建议你看看this website并使用一些jQuery插件。

该网站也有不同的例子如何实现它自己在底部。

来源

2016-04-15 14:43:17

@ NoName84，同样使用https://jsfiddle.net/进行测试:) –

请问，这个问题是非常具体的（虽然有点宽泛？），但建议一个链接不是预期的格式，请你把一些小码？使用prev-next动作循环图像（计数器）有一个特别的妙用，很高兴看到这个答案改进了！ –

感谢Gintas K的网站。我不想使用任何插件。我会检查网站，看看是否有任何好的例子。 – NoName84

jQuery单击幻灯片点击问题

回答

相关问题