jQuery Slideshow Простые инструкции

Question

jQuery Slideshow Простые инструкции

0

Я делаю обратную передачу для получения путей изображения из базы данных и размещения всего:

<div class="postBack">
 <img src="imagepath" class="slideshow" id="0" width="50px" height="50px"/>
 <img src="imagepath" class="slideshow" id="1" width="50px" height="50px"/>
</div>

Это возврат в мой индексный html файл.

Идентификатор увеличивается в зависимости от количества изображений в базе данных.

У меня также есть индикатор выполнения:

<div class="progressbar"style="background-color: #e17904; height: 7px; width: 1%; left: 0px; position: absolute;"></div>

У меня также есть предыдущая и следующая кнопка.

EDIT: Я также добавил: var first = 0; var last = $ ('. postBack img'). length;

Я не уверен, с чего начать... может ли кто-нибудь меня навестить?

belthazorNv 29 март 2014, в 09:30

Источник

Теги:

jquery

2 ответа

0

Это просто простой пример, я надеюсь, что это может вам помочь. Если вы попытаетесь вставить изображения в этот документ, вы увидите, что нажав на предыдущие и следующие кнопки, вы можете просматривать изображения. Я использую методы prependTo и appendTo.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.postBack{
    height: 300px;
    width: 520px;
    position: relative; 
}
.postBack img{
    position: absolute;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#prev').click(function(){
        $('.postBack img:first').appendTo('.postBack')
        })
  $('#next').click(function(){
        $('.postBack img:last').prependTo('.postBack')
        })      
})
</script>

</head>

<body>
<div class="postBack">
    <img src="your-image.jpg" width="520" height="300">
    <img src="your-image.jpg" width="520" height="300">
    <img src="your-image.jpg" width="520" height="300">
</div>
<input type="button" id="prev" value="prev"><input name="" type="button" id="next" value="next">
</body>
</html>

Devima 29 март 2014, в 06:37

Ещё вопросы

belthazorNv · Accepted Answer · 2014-03-29T10-19-00.000Z

Последний проект

var first = 1;
var currentImage = 1;
var slideshowtimer;
function next() {
    if (currentImage != $('.postBack img').length) {                
    $(".progressbar").stop().css({width:'0px'});
    $("." + currentImage).fadeTo(2000, 0).queue(function() {
        clearInterval(slideshowtimer);
        slideshowtimer = window.setInterval(
            function() {
            startSlideshow();
            },20000);
            firstProgress();
        $("." + currentImage).css("display","none").dequeue;            
        currentImage += 1;
        $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue;
    });
    }
    else 
    { 
        $(".progressbar").stop().css({width:'0px'});
        $('.' + currentImage).css("display","none").fadeTo(2000,0).queue(function() {
        clearInterval(slideshowtimer);
        slideshowtimer = window.setInterval(
            function() {
            startSlideshow();
            },20000);
            firstProgress();
            currentImage = 1;
        $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue;
     });
   }
}
function prev() {
    if(currentImage > 1) {                          
        $(".progressbar").stop().css({width:'0px'});
        $("." + currentImage).css("display","none").fadeTo(2000, 0).queue(function() {
        clearInterval(slideshowtimer);
        slideshowtimer = window.setInterval(
            function() {
            startSlideshow();
            },20000);
            firstProgress();
            currentImage -= 1;
            console.log("CURRENT: " + currentImage);
            $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue; 
        });
    }
    else 
    { 
        $(".progressbar").stop().css({width:'0px'});
        $('.' + currentImage).css("display","none").fadeTo(2000,0).queue(function() {
        clearInterval(slideshowtimer);
        slideshowtimer = window.setInterval(
            function() {
            startSlideshow();
            },20000);
            firstProgress();
            currentImage = $('.postBack img').length;
        $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue;
     });
    }
  }

function firstProgress() {
        $('.progressbar').animate({"width":"100%"}, 20000);
}
function startSlideshow() {
    if (currentImage != $('.postBack img').length) {
     $('.' + currentImage).css("display","none").fadeTo(2000,0).queue(function() {
         $(".progressbar").stop().css({width:'0px'}).dequeue;
        $('.progressbar').stop().animate({"width":"100%"}, 20000).dequeue;  
        currentImage += 1;
        $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue;
     });
    }
    else 
    {
        $('.' + currentImage).css("display","none").fadeTo(2000,0).queue(function() {
        currentImage = 1;
         $(".progressbar").stop().css({width:'0px'}).dequeue;
        $('.progressbar').stop().animate({"width":"100%"}, 20000).dequeue;

        $("." + currentImage).stop().css("display","block").fadeTo(2000,1).dequeue;
     });
    }
}

$(window).load(function() {
    slideshowtimer = window.setInterval(
    function() {
    startSlideshow();
    },20000);
    firstProgress();
});

Для тех, кто хочет его использовать :)