如何制作自动幻灯片?

时间:2015-11-12 12:42:08

标签: javascript jquery html css

<div class="sp-content">
    <div class="sp-parallax-bg"></div>
    <ul class="sp-slider bxslider">
        <?php while($row=mysql_fetch_array($resp)) { ?>
        <li><a href="#slide1"><img src="photo/<?php echo $row['image']?>"></a>
        </li>
        <?php }?>
    </ul>
</div>
<!-- sp-content -->
</div>

这是自动滑块的html代码。

.css文件

.sp-slider {
    position: relative;
    left: 0;
    width: 500%;
    height: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    -webkit-transition: left ease-in 0.8s;
    -moz-transition: left ease-in 0.8s;
    -o-transition: left ease-in 0.8s;
    -ms-transition: left ease-in 0.8s;
    transition: left ease-in 0.8s; 
}
.sp-slider > li img{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    padding: 40px 0 50px 0;
    max-height: 100%;
    max-width: 100%;
}

我如何使用这些来制作自动滑块,因为我已经尝试了jquery但仍然无法解决问题。

1 个答案:

答案 0 :(得分:1)

有数百个JQuery插件可以执行这些操作 - take a look