微客导航 » 文章资讯 » JS实现普通轮播图特效

JS实现普通轮播图特效

2023-08-03 16:24:04 127

本文实例为大家分享了JS实现轮播图特效的具体代码，供大家参考，具体内容如下

知识点

轮播图思想：

①建立一个全局变量索引，始终标记当前显示图片。
②根据当前图片的数量，动态创建下方的●图片指示器。
③轮播图的初始状态为第一张图片在中间，剩余所有图片均放在即将显示图片位置。
④当点击>的时候，当前图片调用动画移动函数进行左移，与此同时新的一张图片调用动画函数移入到div中，而会将下一张展示的图片移动到div右侧。
⑤需要进行边界判断，如果当前的图片大于图片数量或者小于等于0，重新给索引赋值。
⑥当点击图片指示器的时候，首先判定点击的与索引的位置关系，然后进行动画移动。
⑦给div添加定时器，自动移动图片。当鼠标进入div，删除定时器，当鼠标移出div，设置定时器。

运行效果

1.自动轮播
2.点击左右切换图片
3.点击下方图片指示器切换图片

代码

引入MyTools.js库

1.html





Title

< >

2.css

*{margin:0;padding:0;}
a{
color:#999;
text-decoration:none;
position:absolute;
top:50%;
transform:translateY(-50%);
background-color:rgba(0,0,0,.4);
}
a:hover{
color:#f8b62b;
}
i{
font-size:50px;
font-family:"HelveticaNeue",Helvetica,Arial,sans-serif;
}
#box{
height:482px;
width:830px;
background-color:red;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
overflow:hidden;
}
#box_content{
height:100%;
width:100%;
cursor:pointer;
}
#box_contentimg{
position:absolute;
vertical-align:top;
height:100%;
width:100%;
/*left:830px;*/
}
.box_img{
width:100%;
height:100%;
position:absolute;}
.box_control_right{
position:absolute;
right:0;
}
.box_control_left{
position:absolute;
left:0;
}
ul{
position:absolute;
bottom:30px;
left:50%;
transform:translateX(-50%);
display:flex;
justify-content:space-evenly;
}
ul>li{
list-style:none;
width:16px;
height:16px;
background-color:#fff;
margin:03px;
border-radius:50%;
cursor:pointer;
}
ul>li.current{
background-color:darkorange;
}

3.js

window.addEventListener('load',function(ev){
//轮播图
(function(){
//1.获取需要标签
varboxContent=myTool.$('box_content');
varcontentImg=boxContent.children;
varboxControl=myTool.$('box_control');
varcontrolBottom=boxControl.children[2];
//2.全局索引
variNow=0;
//3.根据图片个数动态添加下方图片指示器
for(vari=0;iiNow){
myTool.slowMoving(contentImg[iNow],{'left':-scrollImgWidth},null);
contentImg[index].style.left=scrollImgWidth+'px';
}elseif(index=contentImg.length){
iNow=0;
}
contentImg[iNow].style.left=scrollImgWidth+'px';
myTool.slowMoving(contentImg[iNow],{"left":0},null);
//切换索引
changeIndex();
}

//8.设置定时器
vartimerId=setInterval(autoPlay,2000);
//9.鼠标进入图片div后设置和清除定时器
myTool.$('box').addEventListener('mouseover',function(){
clearInterval(timerId);
});
myTool.$('box').addEventListener('mouseout',function(){
timerId=setInterval(autoPlay,2000);
});

})();
},false);

更多关于轮播图效果的专题，请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

JS实现普通轮播图特效

热门推荐

随机推荐