Question

我连续有多个图像我想在没有按钮点击的情况下滑动这些图像一旦页面加载的图像以线性方式开始滑动。我不介意使用HTML5，css3或jquery。但我找不到办法。

这是我的HTML页面：

 <table style="margin-top:90px;">
    <tr>

        <td >

            <img src="~/Content/Images/basket.jpg" style="border-radius: 25px; border: 2px solid #a1a1a1; width: 300px; height: 150px; " />
        </td>
        <td >

            <img src=" ~/Content/Images/download.jpg" style="border-radius: 25px; border: 2px solid #a1a1a1;width:300px;height:150px;" />
        </td>
        <td >

            <img src="~/Content/Images/images.jpg" style="border-radius: 25px; border: 2px solid #a1a1a1;width:300px;height:150px;" />
        </td>
        <td >

            <img src="~/Content/Images/sports.png" style="border-radius: 25px; border: 2px solid #a1a1a1;width:300px;height:150px;" />
        </td>

    </tr>
</table>

我希望他们在用户访问我的页面时缓慢滑动。

可以请别人帮忙吗？

Answer 1

使用bxslider这是一个非常好的jQuery插件。大多数是响应。

或者使用下面的代码

<style>
 .fadein { position:relative; height:210px; width:201px; }
 .fadein img { position:absolute; left:0; top:0; }
</style>
<script type="text/javascript" src="http://www.hscripts.com/jquery.js"></script>
<script type="text/javascript">
 $(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 2000);
});
</script>
<div class="fadein" style='margin-left:130px;height:194px;width:259px;'>
 <img src="http://www.hscripts.com/images/title.png" alt="Image Slideshow Script">
 <img src="http://www.hscripts.com/images/girl.jpg" alt="Image Slideshow Script">
 <img src="http://hiox.org/images/logo.png" alt="Image Slideshow Script">
</div>

希望它能帮到你

图像滑块连续的表

1 个答案: