Jquery，使用上一个/下一个链接在幻灯片图像上添加效果答案

【问题标题】：Jquery, Adding effect on slide image with prev/next linkJquery，使用上一个/下一个链接在幻灯片图像上添加效果
【发布时间】：2014-09-29 18:49:18
【问题描述】：

我是 jquery 的新手，我正在尝试用 jquery 制作一个滑块，这是我现在的脚本：

      $(function()
  {
    var bgCounter = 0,
    text = [
    'some html code here',
    'some html code here',
    'some html code here',
    ],
    link = [
    'LINK',
    'LINK',
    'LINK'
    ],
    backgrounds = [
    "img.jpg",
    "img.jpg",
    "img.jpg"
    ];
    function changeBackground()
    {
      bgCounter = (bgCounter+1) % backgrounds.length;
      $('#Main-screen').css('background', 'url('+backgrounds[bgCounter]+')');
      $('#Main-screen').css('background-size','cover');
      $('#example').html(text[bgCounter]);
      $('a.link').attr("href", "#"+link[bgCounter]);
      setTimeout(changeBackground,4000);
    }
    changeBackground();
  })();

这是 html/css 部分：

  #Main-screen {
      position: relative;
      width:100%;
      height: 100%;

<div id="Main-screen" style="display:inline-block;">
<a class="link" href="#"><span id="example"></span></a>

我不知道是否可以使用此脚本在图像切换时添加效果（如淡入淡出）并在此添加下一个/上一个链接。因此，如果有人有这样做的想法。我真的不知道我的脚本是否可行。因此，如果这不可能，任何人都可以举个例子给我看，那就太好了。

对不起，我的英语不是很好。

【问题讨论】：

标签： javascript jquery html css slide

【解决方案1】：

尝试像这样将效果添加到背景图像中：

  $('#Main-screen').fadeIn().css('background', 'url('+backgrounds[bgCounter]+')');

【讨论】：

感谢您的帮助，但这不起作用。我尝试使用缓慢的效果和/或任何持续时间，但这无济于事。

【解决方案2】：

您可以在这个 jQuery 滑块中轻松绑定：
http://rocha.la/jQuery-slimScroll

自动滚动：
设置滚动条隐藏并使用 javascript 更改 slimScrollBar 的位置

如果你想给图片添加任何动画，我推荐这个：
http://www.minimamente.com/example/magic_animations/

【讨论】：

我了解如何添加效果我只是不知道如何在我的代码上添加此效果我尝试了一些想法，例如：$('#Main-screen').fadeIn("slow ", function() { $('#Mainscreen').css('background','url('+backgrounds[bgCounter]+')'); $('#Main-screen').css('background-尺寸','封面'); });但这不起作用我不知道我是否可以在更改背景（在我的 div 上）之类的事件上使用 fadeIn()。我正在阅读这个 slimScroll。
如果你想在背景改变时启动fadeIn-Method，看这个：
stackoverflow.com/questions/5057990/…
嘿，不，我只是想改变我的背景（在 div 上）并对其产生影响（比如从 img1 到 img2 的 Fede，然后从 2 到 3 等）并添加上一个/下一个停止按钮，但我不知道该怎么做，我搜索了很多，但我找到的只有完整的脚本 jquery。
$('#Main-screen').fadeIn("slow",function(){ /*背景变化 */}); $('#Main-screen').stop();