为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JS实现“旋转木马”幻灯片效果

delay时间如果是每张图片不一样，要实现自动播放，应该怎么修改这个js？

如题：

delay时间如果是每张图片不一样，要实现自动播放，应该怎么修改这个js？

html修改代码如下，js获取每张图片的data-delay的值，

然后设置现有js中autoPlay:function(){ ...,this.setting.delay);} 的this.setting.delay。

问题是，怎能实现没播放一张图片后更改this.setting.delay的值，从而实现不同delay时间的自动播放。

<ul class="poster-list">
          <li class="poster-item" data-delay="1000"><a href="#"><img src="/static/images/cs/1.jpg" width="100%" height="100%"></a></li>
            <li class="poster-item" data-delay="2000"><a href="#"><img src="/static/images/cs/2.jpg" width="100%" height="100%"></a></li>
            <li class="poster-item" data-delay="3000"><a href="#"><img src="/static/images/cs/3.jpg" width="100%" height="100%"></a></li>
            <li class="poster-item" data-delay="4000"><a href="#"><img src="/static/images/cs/4.jpg" width="100%" height="100%"></a></li>
            <li class="poster-item" data-delay="5000"><a href="#"><img src="/static/images/cs/5.jpg" width="100%" height="100%"></a></li>
        </ul>
Celine99

2015-06-07

源自：JS实现“旋转木马”幻灯片效果  3-2

关注问题 我要回答
2379
操作
收起

正在回答

5 回答

一只帅蚂蚁
2015-06-07

你们这是在讨论啥呢~我怎么看晕了呢！！

0 回复 有任何疑惑可以回复我~
收起回答
#1

Celine99 提问者

老师出现了，求助啊。 首先感谢老师指导还把代码共享出来了，现在我在这基础上想实现每张图片停留的时间不一样， 就好像一个循环播放的音乐列表一样，每首歌时间长度都不一样，但是都播完了再进行到下一首， 应该怎么做呢？
2015-06-09 回复 有任何疑惑可以回复我~
#2

一只帅蚂蚁 回复 Celine99 提问者

不好意思啊，刚看到你的问题，播放音乐的的话，就配合音乐播放程序啊，如果播放结束就触发下向下切换按钮的click事件，依次.....
2015-06-12 回复 有任何疑惑可以回复我~
#3

Celine99 提问者 回复 一只帅蚂蚁

谢谢。
2015-06-15 回复 有任何疑惑可以回复我~
伤心雨后
2015-07-03

只是看看

0 回复 有任何疑惑可以回复我~
收起回答
purple_yao
2015-06-08

这里好热闹啊。

0 回复 有任何疑惑可以回复我~
收起回答
Vecchio阿加西
2015-06-07

直接用Js，在每个Li上添加一个用于设置的Span，为这个Span设置一个点击事件，当点击的时候可以以列表或者文本框的形式出现一个设置框，当点击确认的时候添加一个事件把设置框中的值赋值给相应的data-delay。

0 回复 有任何疑惑可以回复我~
收起回答
#1

Celine99 提问者

呃，设置值一点问题也没有，是怎么让这个值工作，代替现有的 this.setting.delay
2015-06-07 回复 有任何疑惑可以回复我~
#2

Vecchio阿加西 回复 Celine99 提问者

在Js里创建一个变量myTag = null，当点击某个span元素后，在触发的该onclick事件中令myTag = this，设置完值后就执行点击事件，在该onclick事件中myTag.parentNode.dataset.delay = this.value。具体的代码根据实现的不同有变更
2015-06-07 回复 有任何疑惑可以回复我~
#3

Celine99 提问者 回复 Vecchio阿加西

谢谢你，我想实现自动播放，所以delay值不能单击设置。现在我不知道怎么让js每执行一次autoPlay()，就更改一次对应的 this.setting.delay 值
2015-06-07 回复 有任何疑惑可以回复我~
#4

Vecchio阿加西 回复 Celine99 提问者

切换nextSibling的图片-->setTimeout(autoPlay,nextSibling的data-delay)么？不知道我俩想的效果是不是一样的。。。
2015-06-07 回复 有任何疑惑可以回复我~
#5

伤心雨后

CES
2015-07-03 回复 有任何疑惑可以回复我~
查看2条回复
Vecchio阿加西
2015-06-07

不知道具体说的什么，Math.random()取随机数×N放大可以么，还是就取出每张图设置一个delay参数逐次+M？

0 回复 有任何疑惑可以回复我~
收起回答
#1

Celine99 提问者

每张图设置一个delay，是用户设置，没有规律
2015-06-07 回复 有任何疑惑可以回复我~
#2

Vecchio阿加西 回复 Celine99 提问者

可以就给用户一个设置框，把设置的值传进来么？
2015-06-07 回复 有任何疑惑可以回复我~
#3

Celine99 提问者 回复 Vecchio阿加西

data-delay里面的值 <ul class="poster-list"> <li class="poster-item" data-delay="1000"><a href="#"><img src="/static/images/cs/1.jpg" width="100%" height="100%"></a></li> </ul>
2015-06-07 回复 有任何疑惑可以回复我~
#4

戈饭 回复 Celine99 提问者

那就让用户传进来呗
2015-06-07 回复 有任何疑惑可以回复我~
查看1条回复

举报

0/150
提交
取消
JS实现“旋转木马”幻灯片效果
  • 参与学习       66442    人
  • 解答问题       147    个

JS组件封装，制作一个图片幻灯片切换效果，一起学习吧

进入课程

本课相似问答

1 回答这个放不应该去第一张，直接取第二张，就把这问题解决了

1 回答最后一张图片大小被改变了

3 回答那几张照片怎么突然间就叠在一起了

1 回答只用JS能实现么整个案例的效果么？？

2 回答carousel这个JS库要自己下载吗？
搜索更多本课相关问答

delay时间如果是每张图片不一样，要实现自动播放，应该怎么修改这个js？

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信