Question

我有这个例子：

这是代码HTML：

    <div id="#slide">
    <div class="img1"> <img src="http://www.avatarsdb.com/avatars/super_mario_panic.gif" /><p>pic1</p></div>
    <div class="img1"> <img src="http://www.smwiki.net/images/d/d1/53338_SB4_C_mario_yoshi_01_ad-100x100.jpg
" /><p>pic2</p></div>
    <div class="img1"> <img src="http://www.avatarsdb.com/avatars/super_mario_smile.jpg" /><p>pic3</p></div>

</div>

这是代码JS：

var CurrentImage=$('#slide .img1:first').index();
alert(CurrentImage);
var LastImage=$('#slide .img1:last').index();
alert(LastImage);
var NextImage=CurrentImage+1;

$('.img1').hide();

此代码不完整，我是初学者，想知道如何自动滚动图片。

以上是我试图制作的代码示例。

我隐藏了图片，但不知道如何自动回放它们？要调用特定的函数吗？

提前致谢！

Answer 1

我已经更新了你的小提琴，你现在可以试试 https://jsfiddle.net/4zuzxdxf/3/

<div id="slide">
    <div> <img src="http://www.avatarsdb.com/avatars/super_mario_panic.gif" /><p>pic1</p></div>
    <div> <img src="http://www.smwiki.net/images/d/d1/53338_SB4_C_mario_yoshi_01_ad-100x100.jpg
" /><p>pic2</p></div>
    <div> <img src="http://www.avatarsdb.com/avatars/super_mario_smile.jpg"/><p>pic3</p></div>   
</div>

用于js文件

setInterval(function() { 
  $('#slide > div:first')
    .fadeIn(1000)
    .appendTo('#slide');
},  3000);

Answer 2

既然你提到你是初学者，你是为了学习的目的而这样做，还是有兴趣使用一个能为你完成这项工作的jQuery库？如果你这样做，考虑使用jQuery循环：

首先，包括jQuery（我假设你有，因为你正在使用$），以及HTML中的循环脚本

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.cycle/2.88/jquery.cycle.all.js"></script>

然后，在那之后的某个地方，你需要在滑块div上调用循环脚本：

<script type="text/javascript">
 $(document).ready(function(){
   $("#photos").cycle();
});
</script>

当然，如果您想要具有特定的滚动效果，请查看the website插件并阅读教程，您会发现许多不同的选项。

如何让这些图像自动滚动？

2 个答案: