javascript - slider - 你会如何制作一个简单的 slider ？

Question

编辑:我希望我的 slider 对您来说很容易，一旦单击链接，就会显示与链接相关的图像。

我正在寻找一个非常简单的“ slider ”，如果您单击一个链接，img 会显示与之相关的内容。我一直在尝试寻找一些东西，但东西要么太闪光，要么不适合我的需要。这很接近:http://jsfiddle.net/bretmorris/ULNa2/7/

我想要一些更简单的东西，可以轻松应用于不同 div 的多个图像。

这是我的代码的样子，只有一个简单的 img 标签:

<div id="adobe_content" class="hdiv"><button class="x">X</button>
<img src="images/adobefront.png"><br>
<img src="images/adobeinside.png"><br>
<img src="images/adobeback.png"><br>
<h5>Adobe Brochure</h5>
<p>
I wanted to make something functional and out the box that Adobe might consider giving out. It's clean like their work and sparks interest in opening the brochure with the cut out in the center. The front flap is able to slide into a slot on the right side for a neat logo. They're now more interested in their cloud, but the information is inside is still relevant!
</p>
<b>Programs used: Adobe Illustrator, InDesign and Photoshop.</b>
</div>

该代码对我不起作用，因为我部分不理解它，而且我不确定如何使其满足我的需求(尤其是当我有多个图像时)，例如与图像相关联.

Answer 1

也许理解正在发生的事情可能会让你走上正轨，所以这里有一个解释:

$('a.prev').click(function() {
    prevSlide($(this).parents('.slideshow').find('.slides'));
});
//clicking image goes to next slide
$('a.next, .slideshow img').click(function() {
    nextSlide($(this).parents('.slideshow').find('.slides'));
});

这部分比较简单，当你点击上一个或下一个链接时，调用prevSlide或 nextSlide函数，将幻灯片集合作为参数传递。

//initialize show
iniShow();

function iniShow() {
    //show first image
    $('.slideshow').each(function() {
        $(this).find('img:first').fadeIn(500);
    })
}

通过在页面上找到每个幻灯片并淡入第一张图像来初始化幻灯片。 $(this)指的是<div class="slideshow">父级，找到所有子图像标签并获取第一个元素，淡入该元素(并在 500 毫秒内完成)。

function prevSlide($slides) {
    $slides.find('img:last').prependTo($slides);
    showSlide($slides);
}

function nextSlide($slides) {
    $slides.find('img:first').appendTo($slides);
    showSlide($slides);
}

prevSlide和 nextSlide函数都重新排列图像的顺序，特别是这一行:

$slides.find('img:first').appendTo($slides);

将第一张图片移动到图片的末尾，所以:

 <img src="http://placekitten.com/300/500" width="300" height="500" />
 <img src="http://placekitten.com/200/400" width="200" height="400" />
 <img src="http://placekitten.com/400/400" width="500" height="400" />

变成:

  <img src="http://placekitten.com/200/400" width="200" height="400" />
  <img src="http://placekitten.com/400/400" width="500" height="400" />
  <img src="http://placekitten.com/300/500" width="300" height="500" />

$slides.find('img:last').prependTo($slides);执行相反的操作并将最后一张图像移到开头。

function showSlide($slides) {
    //hide (reset) all slides
    $slides.find('img').hide();
    //fade in next slide
    $slides.find('img:first').fadeIn(500);
}

最后，showSlide接受图像集合，隐藏所有图像，然后在第一张图像中淡出(因为集合每次都重新排序，第一张是不同的图像)。

现在，如果您想要每个图像的链接将显示相应的图像，您可以做一些简单的事情:

<a class="image" data-src="http://placekitten.com/300/500">Kitten 1</a>
<a class="image" data-src="http://placekitten.com/200/400">Kitten 2</a>
<a class="image" data-src="http://placekitten.com/400/500">Kitten 3</a>
<div id="image-container">
   <img src="http://placekitten.com/300/500" />
</div>

和类似下面的内容:

$('.image').on('click', function() {
  var imageSrc = $(this).data('src');
  $('#image-container img').prop('src', imageSrc);
});

这将更新 <div id="image-container"> 的子图像标签与 data-src单击链接中的属性值。

http://jsfiddle.net/9sxt6n0t/

希望这对您有所帮助。