2

我正在寻找开发或使用现有的 jQuery 幻灯片。

幻灯片的特征如下

将有 5 个框将使用相同的图像池并单独旋转框上的图像，而不会同时在 2 个或更多框上显示相同的图像。

它看起来像这样：

在此处输入图像描述

每个框将显示旋转（淡出）图像。

怎么可能达到这个效果？你知道任何现有的创建它的插件吗？

谢谢

4

2 回答 2

1

jsBin 演示

使用fademe jQuery 插件：

HTML：

<div class="boxes"></div>

CSS：

.box{
  width:100px;
  height:100px;
  border:4px solid #000;
  margin:5px;
  float:left;
}
.box img{
  position:absolute;
}

jQuery：

// IMAGES ARRAY:
images = [
  'http://placehold.it/100x100/cf5&text=1',
  'http://placehold.it/100x100/adf&text=2',
  'http://placehold.it/100x100/468&text=3',
  'http://placehold.it/100x100/953&text=4',
  'http://placehold.it/100x100/583&text=5',
  'http://placehold.it/100x100/f27&text=6',
  'http://placehold.it/100x100/48f&text=7'
];

// GENERATE BOXES
for(i=0;i<5;i++){
 $('.boxes').append('<div class="box"/>');
}

// APPEND ALL IMAGES TO EACH BOX
for(i=0;i<images.length;i++){
 $('.box').append('<img src="'+ images[i] +'" />');
}

// APPLY fademe plugin TO EACH BOX
for(i=0;i<5;i++){
 $('.box').eq(i).fademe(0,0,i+1);  // the 3rd value is the 'S' ooption (starting slide number)
}
于 2012-10-14T11:16:23.590 回答
0

如果您还没有看过它，我建议您看一下 jQuery SlideJS插件。

检查此以获取不同的示例

<script>
        $(function(){
            $("#slides").slides();
        });
    </script>

<body>
    <div id="slides">
        <div class="slides_container">
            <div>
                <img src="img1">
            </div>
            <div>
                <img src="img2">
            </div>
        </div>
    </div>
</body>

您还可以组合自定义选项：

$(function(){
      $("#slides").slides({
        preload: true,
        preloadImage: '/img/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: true
      });
    });
于 2012-10-14T10:55:50.687 回答