2015-11-12 79 views
-1
<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

有数百个JQuery插件可以做这些事情 - take a look