作者：淑敏惟雄988 | 来源：互联网 | 2023-09-23 14:34
本文实例为大家分享了JS实现图片自动播放效果的具体代码，供大家参考，具体内容如下
JS实现图片自动播放
1、先看效果图
2、完整代码
3、关键代码讲解
3.1、css设置注意事项：img-g的宽度为：img的个数乘以bannerimage的宽度，如下：
.img-g{width:4900px;height:400px;position:relative;}
3.2、轮播常量及事件设置
常量1设置为：bannerimage的宽度乘以图片的个数，如下：
if(parseInt(p.style.left)>-4200){}
常量2设置为：bannerimage的宽度保持一致即可（700），如下：
p.style.left=parseInt(p.style.left)-700+"px"
小圆点显示设置：
// 设置小圆点
for(var i=0;i5){
tog(0);
return;
}
for(var i=0;i
鼠标事件：鼠标移上停止播放，移除3秒后播放。
// 鼠标移上事件
p.Onmouseover=function(){
clearInterval(window.timer)
}
// 鼠标移除事件
p.Onmouseout=function(){
window.timer=setInterval(move,3000);
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程笔记。
京公网安备 11010802041100号