jquery - 一排表格中的图像 slider

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

使用非常好的 jQuery 插件 bxslider。其中大部分是响应式的。

或者使用下面的代码

<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>

希望对你有帮助