滑塊-您將如何制作一個簡單的滑塊？

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);
});

它將使用單擊的鏈接中的data-src屬性值更新<div id="image-container">的子圖像標簽。

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');

此處演示