0

只是有几个无法解决的 css 问题，所以我将其保留为默认 css。

下面是显示图像滑块的应用程序：应用程序

我的问题是如何让Prev和Next链接显示在图像滑块之外的图像两侧而不是滑块中，因为它与图像重叠？

我的另一个问题是在滑块下方，它包含滑块编号1 2 3，因此我们知道哪个图像是滑块中的第一个第二个和第三个图像并选择它们。我的问题是如何将数字分开，以免它们靠得太近？

下面是Prev and Next链接的CSS：

ul.bjqs-controls{list-style:none;margin:0;padding:0;z-index:9999;}
ul.bjqs-controls.v-centered li a{position:absolute;}
ul.bjqs-controls.v-centered li.bjqs-next a{right:0;}
ul.bjqs-controls.v-centered li.bjqs-prev a{left:0;}

下面是图片底部数字的css：

ol.bjqs-markers{list-style: none; padding: 0; margin: 0; width:100%;}
ol.bjqs-markers.h-centered{text-align: center;}
ol.bjqs-markers li{display:inline;}
ol.bjqs-markers li a{display:inline-block;}

HTML和jQuery：

 <div id="banner-image_<?php echo $key; ?>">
 <ul class="bjqs">
<?php foreach ($arrImageFile[$key] as $i) { ?>
<li><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></li>
<?php } ?>
</ul>
</div>

         <script type="text/javascript">

jQuery(document).ready(function($) {

         $('#banner-image_<?php echo $key; ?>').bjqs({
            animtype      : 'slide',
            height        : 200,
            width         : 200,
            responsive    : true,
            randomstart   : false,
            automatic : false
          });  
          });

          </script>
4

1 回答 1

0

问题第二部分的答案是添加填充到

ol.bjqs-markers li{display:inline;}

如图所示：http: //jsfiddle.net/uYXkA/

我将在 OP 发布 HTML 后回答第一部分。

编辑：好吧，看起来 jquery 为您的 prev 和 next 创建了它自己的 css。我们可以解决这个问题 - 只需将其添加到您的 css 中：

ul.bjqs-controls.v-centered li.bjqs-prev a {
    left: -40px;
}

和：

ul.bjqs-controls.v-centered li.bjqs-next a {
    right: -40px;
}

接下来，您可能希望整体移动图像。为此，只需将 css 更改为 div.lt-container. 如果你添加

margin: 0 auto;
width: 50%;

它会变得居中。它看起来不会很漂亮，但它会起作用。

于 2013-02-10T01:46:44.580 回答