Question

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

我不知道是否使用此脚本我可以在切换图像时添加效果（如淡入淡出）并在此处添加下一个/上一个链接。所以，如果有人有想法这样做。我真的不知道我的脚本是否可行。所以，如果这是不可能的，任何人都可以向我展示一个例子，那将非常棒。

抱歉，我的英语不是很好。

Answer 1

尝试将效果添加到背景图像更改中：

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

Answer 2

您可以轻松绑定此jQuery滑块：
http://rocha.la/jQuery-slimScroll

自动滚动：
设置隐藏滚动条并使用javascript

更改slimScrollBar的位置

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

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

2 个答案: