Question

编辑：我希望我的滑行能够方便你和一个链接点击与链接显示相关的图像。

我正在寻找一个非常简单的“滑块”，如果你点击链接，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/

希望这有帮助。

Answer 2

只是一个快速滑动的功能

function slideIt(images , prev , next){
$('.slideshow img:nth-child(1)').show();
    var imagesLength = $(images).length;
var i = 1;
$(prev).click(function() {
    $(images).hide();
    if(i !== 1){
        $(images + ':nth-child('+ (i - 1) +')').show();
        i--;
    }else{
        $(images +':nth-child('+imagesLength +')').show();
        i = imagesLength;
    }
});
//clicking image goes to next slide
$(''+next+','+images+'').on('click',function() {
    $(images).hide();
    if(i !== imagesLength){
        $(images + ':nth-child('+ (i + 1) +')').show();
        i++;
    }else{
        $(images + ':nth-child(1)').show();
        i = 1;
    }
});
}

并使用像slideIt（Images，prevArrow，nextArrow）

slideIt('.slideshow img','a.prev' , 'a.next');

DEMO HERE

滑块 - 你会如何制作一个简单的滑块？

2 个答案: