Javascript 滑块-如何制作简单的滑块？

编辑：我希望我的滑块对你来说很容易，一旦点击了链接，就会显示与链接相关的图像

我想做一个非常简单的“滑块”，如果你点击一个链接，img就会显示与之相关的内容。我一直在寻找一些东西，现在，事情要么太快，要么不适合我的需要。这一点很接近：

我想要一些简单一点的东西，可以很容易地应用于不同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>

X






Adobe手册

我想让一些功能性的东西出现在Adobe可能会考虑的盒子里。它像他们的作品一样干净，并激发了人们打开中间有切口的小册子的兴趣。前活门可以滑入右侧的插槽中，以形成整洁的徽标。他们现在对他们的云更感兴趣了，但是里面的信息仍然是相关的！

使用的程序：Adobe Illustrator、InDesign和Photoshop。

---

代码对我来说不起作用，因为我部分不理解它，而且我不确定如何使它适合我的需要（特别是当我有多张图像时），比如与一张图像相关。

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

$('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'));
});

这一部分相对简单，当您单击上一个或下一个链接时，调用

prevsiled

或

nextSlide

函数，将幻灯片集合作为参数传递

//initialize show
iniShow();

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

通过在页面上查找每个幻灯片并在第一个图像中淡入，初始化幻灯片

$（此）

引用父图像，找到所有子图像标记并获取第一个，淡入该元素（并在500毫秒内完成）

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" />

最后，

showsile

接受图像集合，隐藏所有图像，然后在第一个图像中淡入淡出（因为集合每次都重新排序，所以第一个图像是不同的图像）

现在，如果您想为每个图像创建一个链接，以显示相应的图像，您可以执行以下简单操作：

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

这将使用单击链接中的

数据src

属性值更新

的子图像标记

---

希望这有帮助。

只是一个快速滑动功能

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

并像幻灯片一样使用（图像、上箭头、下箭头）

---

您具体从滑块中寻找什么？是什么让这一个接近，但不完全是你想要的？“我不知道如何使它适合我的需要”什么是预期的结果？如上所述，我希望链接与图像关联，以显示它。我不想要浮华，我只想在点击链接时显示我的图像，如示例中所示。

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

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

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('.slideshow img','a.prev' , 'a.next');