Question

我正在进行回发以从数据库获取图像路径并将所有内容放置如下：

<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文件。

id增加取决于数据库中有多少图像。

我还有一个进度条：

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

我也有一个上一个和下一个按钮..

编辑：我刚刚补充说： var first = 0; var last = $（＆＃39; .postBack img＆＃39;）。length;

我不确定从哪里开始..有人可以指导我吗？

Answer 1

这只是一个简单的例子，我希望它可以帮到你。如果您尝试在此文档中插入图像，您将看到通过单击prev和next按钮可以浏览图像。我使用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>

Answer 2

最终项目

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

对于那些想要使用它的人：）

jQuery幻灯片简单的howto

2 个答案: