Очень короткое слайд-шоу с изображениями jQuery

Question

Очень короткое слайд-шоу с изображениями jQuery

0

Я ищу кратчайший способ создания слайд-шоу с затухающим изображением с помощью jQuery. В примерах, которые я нашел в google, всегда было много ненужных специальных вещей, и я не мог понять их. :/

Слайд-шоу нужно будет выставить существующее изображение:

<img src="myImage.jpg"/>

используя образы follogin:

imgArray = ["img1.jpg","img2.jpg","img3.jpg"]

Какой был бы самый короткий/простой способ сделать это?

Forivin 14 нояб. 2013, в 08:01

Источник

0

Сначала поработайте, и если есть какие-то проблемы, с которыми вы столкнулись, то опубликуйте это здесь ....
GGG 14 нояб. 2013, в 06:10

Теги:

javascript

jquery

html

slideshow

4 ответа

2

Надежда ниже кода может помочь вам,

var imgArray = ["img1.jpg","img2.jpg","img3.jpg"];
var i=0;
setInterval(function(){
    $('div').fadeToggle(2000,function(){
        $(this).text(imgArray[i]);    
    });
    i++;
    if(imgArray.length==i-1){
        i=0;
    }     
},2000);

демонстрация

Rohan Kumar 14 нояб. 2013, в 04:40

1

Вы можете перебрать свой массив и использовать JQuery fadeIn в тандеме с fadeOut с указанной длительностью. Это будет исчезать и исчезать ваши изображения с указанными интервалами.

http://api.jquery.com/fadeIn/

http://api.jquery.com/fadeOut/

TGH 14 нояб. 2013, в 04:30

0

Вы можете перейти по этой ссылке, чтобы создать слайд изображения с очень небольшим количеством кода. Вся идея заключается в том, чтобы сдвинуть положение изображения и использовать эффект преобразования при изменении положения изображений.

http://jforjs.com/creating-image-slider-html-css-without-plugin/

Хорошо, что вы можете создать объектно-ориентированный код (jquery pluing), а также создать несколько слайдов изображений всего несколькими строками кода.

jforjs 14 нояб. 2013, в 04:36

Ещё вопросы

Сначала поработайте, и если есть какие-то проблемы, с которыми вы столкнулись, то опубликуйте это здесь ....

Villarrealized · Accepted Answer · 2013-11-14T04-07-00.000Z

Вот и вы, соедините это через 15 минут...

FIDDLE: http://jsfiddle.net/eEg3R/4/

HTML:

<img id="slide" src=""/>

КОД:

    var images = ['http://placehold.it/300x300/000','http://placehold.it/300x300/ddd','http://placehold.it/300x300/123456'];

function slideshow(options) {
    var defaults ={
        fadeInSpeed:1000,
        fadeOutSpeed:1000,
        slideLength:4000
    }

    //merge options with defaults
    var settings= $.extend({},defaults,options);
    //get a reference to our image holder
    var $slide = $('#slide');
    //initialize the slide index
    var slideIndex=0;

    //begin the slideshow
    nextSlide();

    function nextSlide(){
        //load the new image...
        $slide[0].src = images[slideIndex];
        //show it
        $slide.fadeIn(settings.fadeInSpeed,function(){
            setTimeout(function(){
                $slide.fadeOut(settings.fadeOutSpeed,nextSlide);
                //increment index and reset to 0 when we have reached the end
               slideIndex = ++slideIndex % images.length;
            },settings.slideLength); 
        });
    }
}

$(function(){
    //optionally pass in custom settings, or just run normal to use defaults...
    slideshow();    
});