Question

我想播放我的作品幻灯片，但我是html / css / jquery的新手。我正在使用一个看起来像这样的jquery插件：

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({ 
    fx:     'scrollHorz', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});
</script>

HTML看起来像这样：

<div align="center" id="slideshow">
        <div class="controller" id="prev"></div>
        <div id="slider">
        <img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
        <img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
        <img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
        <img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
        <img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
        </div>
        <div class="controller" id="next"></div>
</div>

我一直在修改滑块ID＆amp;我已经尝试了所有我知道的东西 - margin：0 auto;，text-align：center，display：block;但没有任何工作。帮助

Answer 1

试试这个：

使用jQuery

$('#slider img').css({position: 'relative', margin: 'auto'});

使用CSS，您必须使用!important，因为cycle jQuery plugin正在为图片添加inline CSS

#slider img {
    position: relative !important;
    margin: auto !important;
}

如何在幻灯片中放置不同大小的图像？

1 个答案: