我可以使用插件来更改图像

Question

在我的情况下如何做这个滑块。在另一个地方拍摄图像并进行更改。

Answer 1

ping google时有很多插件可用..

这里的一些样品......

1. http://www.learningjquery.com/2015/02/best-jquery-image-slider-plugins

2. http://designscrazed.org/free-responsive-jquery-image-sliders/

使用out插件只需使用示例图像滑块

尝试以下

的jsfiddle：

http://jsfiddle.net/bretmorris/ulna2/7/

HTML：

<div class="slideshow">
    <div class="controls">
        <a class="prev" href="javascript:void(0);">Previous Slide</a> |
        <a class="next" href="javascript:void(0);">Next Slide</a>
    </div>
    <div class="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/500/400" width="500" height="400" />
    </div>
</div>

CSS：

/* slideshow initialized w/ js */
.slideshow img { display: none; cursor: pointer; }

Jquery的：

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

//initialize show
iniShow();

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

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

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

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