创建幻灯片-jQuery [英] Creating slideshow - Jquery

问题描述

我在这里有一个非常简单的幻灯片: http://jsfiddle.net/Jtec5/
以下是代码:
HTML:

I have this very simple slideshow here: http://jsfiddle.net/Jtec5/
Here's the codes:
HTML:

<div id="slideshow">
   <div>
     <img src="http://farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg">
   </div>
   <div>
     <img src="http://farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg">
   </div>
   <div>
     <img src="http://gillespaquette.ca/images/stack-icon.png">
   </div>
</div>

CSS:

#slideshow { 
    margin: 50px auto; 
    position: relative; 
    width: 240px; 
    height: 240px; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    right: 10px; 
    bottom: 10px; 
}

jQuery:

$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
},  3000);

我正在尝试添加圆圈，以告诉我幻灯片显示在哪张照片中以及幻灯片中有多少张照片，例如那些圆圈:

I'm trying to add the circles that tells me in which photo the slideshow is and how many photos there's in the slideshow, like those circles:

而且我也无法做到图片进入幻灯片放映框而不会掉下来(对于幻灯片放映使用固定的宽度和高度，而脚本则固定照片的宽度和高度，或者只是将其剪切为在框的幻灯片的框架内并且不要松开它)，我的意思是我不希望这样显示照片:

And also I'm unable to do that the pictures gets in the slideshow box and do not get off it(use fixed width and height for the slideshow and a script fix the width and height of the photo or just cut it to be inside the frame of the slideshow of the box and do NOT get off it), what I mean I don't want the photos to be shown like that:

推荐答案

您可以执行以下操作: http://jsfiddle.net/Jtec5/2/

You could do something like: http://jsfiddle.net/Jtec5/2/

在HTML底部添加了<ul></ul>. 在CSS中添加了以下内容:

Added <ul></ul> to the bottom of your HTML. Added the following to your CSS:

#slideshow img {
    max-width:240px;
    max-height:240px;
}
ul {
    list-style:none;
    margin:0px;
    padding:0px;
}
ul li {
    float:left;
    border-radius:10px;
    width:10px;
    height:10px;
    border:1px solid white;
    background:grey;
}
ul li.active {
    background:black;
}

和JS:

$("#slideshow > div:gt(0)").hide();

var index = 1;
var maxindex = $('#slideshow > div').length;

setInterval(function () {
    $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    $('ul li').removeClass('active');
    $('ul li:eq(' + index + ')').addClass('active');
    index = index < maxindex - 1 ? index + 1 : 0;
}, 3000);

for (var i = 0; i < maxindex; i++) {
    $('ul').append('<li class="' + (i == 0 ? 'active' : '') + '"></li>');
}

现在，您将需要对其进行样式设置，就像您想要拥有它一样.

Now you going to have to style it a little bit like you want to have it.

希望有帮助.

这篇关于创建幻灯片-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！