JS实现图片自动播放效果
时间：2022-11-28 10:29:43|栏目：JavaScript代码|点击： 次
本文实例为大家分享了JS实现图片自动播放效果的具体代码，供大家参考，具体内容如下
JS实现图片自动播放
1、先看效果图
2、完整代码
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义样式 */
body{
margin: 5% 30%;
}
.bannerimage{width:700px;height:400px;float:left;background-size:100% 100%;color:#fff;box-shadow: 0 0 12px 2px #142732;}
.box{width:700px;height:400px;margin:0px auto;overflow: hidden;}
/* box的宽度为img的个数乘以bannerimage的宽度*/
.img-g{width:4900px;height:400px;position:relative;}
.img-g img{float:left;width:700px;height:400px;}
.button-g{position:relative;top:-35px;text-align:center;}
.button-g span{display:inline-block;position:relative;z-index:10;width:10px;height:10px;margin:0 5px;border-radius:100%;cursor: pointer;}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function () {
// 实现自动播放
var p=document.getElementsByClassName('img-g')[0];
var button=document.querySelectorAll('.button-g span')
// 设置3秒播放
window.timer=setInterval(move,3000);
// 轮播设置
function move(){
// bannerimage的宽度乘以图片的个数
if(parseInt(p.style.left)>-4200){
// 和bannerimage的宽度保持一致即可：700
p.style.left=parseInt(p.style.left)-700+'px'
p.style.transition='left 1s';
tog(-Math.round(parseInt(p.style.left)/700))
if(parseInt(p.style.left)<=-4200){
setTimeout(function(){
tog(0)
p.style.left='0px'
p.style.transition='left 0s';
},1000)
}
}else{
p.style.left='0px'
p.style.transition='left 0s';
}
}
// 设置小圆点
for(var i=0;i<button.length;i++){
// button[i].style.backgroundColor='#eee';
button[i].onclick=function(){
p.style.left=-700*this.getAttribute('data-index')+'px'
tog(this.getAttribute('data-index'))
clearInterval(window.timer)
window.timer=setInterval(move,3000);
}
}
// 设置小圆点
function tog(index){
if(index>5){
tog(0);
return;
}
for(var i=0;i<button.length;i++){
button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
}
button[index].style.backgroundColor='rgb(255, 255, 255)';
}
// 鼠标移上事件
p.onmouseover=function(){
clearInterval(window.timer)
}
// 鼠标移除事件
p.onmouseout=function(){
window.timer=setInterval(move,3000);
}
});
</script>
</head>
<body>
<div class="bannerimage">
<div class='box'>
<div class='img-g' style='left:0px;transition:left 1s;'>
<img src="images/img_1.jpg" alt="1">
<img src="/images/img_2.jpg" alt="2">
<img src="/images/img_3.jpg" alt="3">
<img src="/images/img_4.jpg" alt="4">
<img src="/images/img_5.jpg" alt="5">
<img src="/images/img_6.jpg" alt="6">
<img src="/images/img_1.jpg" alt="1">
</div>
<div class='button-g'>
<span data-index='0' style="background-color: #eeeeee"></span>
<span data-index='1' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='2' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='3' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='4' style="background-color: rgba(255, 255, 255, 0.5)"></span>
<span data-index='5' style="background-color: rgba(255, 255, 255, 0.5)"></span>
</div>
</div>
</div>
</body>
</html>
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;i<button.length;i++){
button[i].style.backgroundColor='#eee';
button[i].onclick=function(){
p.style.left=-700*this.getAttribute('data-index')+'px'
tog(this.getAttribute('data-index'))
clearInterval(window.timer)
window.timer=setInterval(move,3000);
}
}
// 设置小圆点点击事件
function tog(index){
// 圆点的个数
if(index>5){
tog(0);
return;
}
for(var i=0;i<button.length;i++){
// 默认圆点的显示颜色
button[i].style.backgroundColor='rgba(255, 255, 255, 0.5)';
}
// 当前圆点的显示颜色
button[index].style.backgroundColor='rgb(255, 255, 255)';
}
鼠标事件：鼠标移上停止播放，移除3秒后播放。
// 鼠标移上事件
p.onmouseover=function(){
clearInterval(window.timer)
}
// 鼠标移除事件
p.onmouseout=function(){
window.timer=setInterval(move,3000);
}
