Jquery，添加上一个/下一个链接对幻灯片图像的效果

Jquery, Adding effect on slide image with prev/next link

本文关键字：图像 幻灯片 链接 添加 上一个 下一个 Jquery      更新时间：2023-09-26

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

我不知道用这个脚本我是否可以在我的图像切换时添加效果（比如淡入淡出），并在上面添加下一个/上一个链接。所以，如果有人有这样的想法。我真的不知道我的剧本是否可能。所以，如果这不可能，谁能给我举个例子，那就太棒了。

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

尝试将效果添加到背景img cahnge中，如下所示：

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

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

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

如果你想在图片中添加任何动画，我建议你这样做：
http://www.minimamente.com/example/magic_animations/

相关文章：