介绍
这篇文章主要讲解了js实现无缝轮播图特效的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
索引。js:
var配置={
imgWidth: 380//图片尺寸//dotWidth: 8日小圆点尺寸
延迟性肌肉酸痛:{
divImgs: document.querySelector (& # 39; .imgs& # 39;),
divDots: document.querySelector (& # 39; .circle& # 39;),
divDirection: document.querySelector (& # 39; .direction& # 39;),
divContainer: document.querySelector (& # 39; .container& # 39;)
}，
curIndex: 0,//实际图片索引,0 ~ imgNumber-1
计时器:{//时间:16日运动间隔时间
总:1000//总时间
id: null//计时器编的号
}
}//图片的数量
配置。imgNumber=config.doms.divImgs.children.length;//初始化元素尺寸
配置。imgsWidth=(配置。imgNumber + 2) * config.imgWidth;
配置。dotsWidth=(配置。imgNumber + 2) * config.dotWidth;//初始化
函数印锑(){
intiWidth ();
intiCount ();
intiElement ();
intiPosition ();
函数intiWidth () {
config.doms.divImgs.style。宽度=配置。imgsWidth + & # 39; px # 39;;
config.doms.divDots.style。宽度=配置。dotsWidth + & # 39; px # 39;;
}
函数intiCount () {
(var=0;我& lt;config.imgNumber;我+ +){
var p=document.createElement (& # 39; p # 39;);
config.doms.divDots.appendChild (p);
}
}
函数intiElement () {
var=config.doms.divImgs。去年=config.doms.divImgs.children孩子[0],[config.imgNumber-1];
var newImg=first.cloneNode(真正);//深度克隆
config.doms.divImgs.appendChild (newImg);
newImg=last.cloneNode(真正的);
config.doms.divImgs.insertBefore (newImg,第一);
}
函数intiPosition () {
var左=(-config.curIndex-1) * config.imgWidth;
config.doms.divImgs.style。marginLeft=左+ & # 39;px # 39;;
setDots();//小圆点的激活状态位置设置
}
}
印锑();//小圆点的激活状态位置设置
函数setDots () {
(var=0;我& lt;config.doms.divDots.children.length;我+ +){
var点=config.doms.divDots.children[我];
如果(我===config.curIndex) {
点。className=& # 39;选择# 39;;
其他}{
点。className=& # 39; & # 39;;
}
}
}/*
图片切换
指数:图片索引
说明:图片切换方向(左、右)
*/函数switchTo(指数、方向){
如果(指数===config.curIndex) {
返回;
}
如果(方向){=& # 39;方向正确# 39;;//默认状态下向右切换图片
}//最终的显示图片;图片容器的marginLeft
var新左派=(索引1)* config.imgWidth;
animateSwitch ();//config.doms.divImgs.style。marginLeft=新左派+ & # 39;px # 39;;//小圆点的激活状态位置设置
配置。curIndex=指数;
setDots ();//一张图片的总运动次数
var=Math.ceil数量(config.timer.total/config.timer.duration);//当前运动次数
var curNumber=0;
var距离,//总运动距离
totalWidth=config.imgNumber * config.imgWidth,
marginLeft=parseFloat (getComputedStyle (config.doms.divImgs) .marginLeft);
如果(方向===& # 39;左# 39;){
如果(新左派& lt;marginLeft) {
距离=新左派——marginLeft;
其他}{
距离=- (totalWidth-Math。abs(新左派- marginLeft));
}
}
如果(方向===& # 39;对# 39;){
如果新左派的在marginLeft) {
距离=新左派——marginLeft;
其他}{
距离=totalWidth-Math。abs(新左派——marginLeft);
}
}//每次改变的距离
var everDistence=距离/数量;//逐步改变marginLeft
函数animateSwitch () {
clearAnimate ();
config.timer。id=setInterval(函数(){
marginLeft +=everDistence;
如果(方向===& # 39;左# 39;,,Math.abs (marginLeft)比;totalWidth) {
marginLeft +=totalWidth;
}
else if(方向===& # 39;对# 39;,,Math.abs (marginLeft) & lt;config.imgWidth) {
marginLeft -=totalWidth;
}
config.doms.divImgs.style。marginLeft=marginLeft + & # 39; px # 39;;
curNumber + +;
如果(curNumber===号){
clearAnimate ();
}
},config.timer.duration);
}//清空计时器
函数clearAnimate () {
clearInterval (config.timer.id);
config.timer。id=零;
}
}//默认情况下自动向右轮播图片
var计时器=setInterval(函数(){
如此往复();
},2000);
config.doms.divContainer。onmouseleave=function () {
计时器=setInterval(函数(){
如此往复();
},2000);
}//鼠标移出则清空定时器
config.doms.divContainer。onmouseover=function () {
clearInterval(计时器);
}//左右点击事件
config.doms.divDirection。onclick=function (e) {
clearInterval(计时器);
如果(e.target.classList.contains(& # 39;左# 39;)){
toLeft ();
}
如果(e.target.classList.contains(& # 39;对# 39;)){
如此往复();
}
}
函数toLeft () {
var指数=配置。curIndex - 1;
如果(指数& lt;0){
指数=配置。imgNumber - 1;
}
switchTo(指数& # 39;对# 39;);
}
函数到右(){
var指数=配置。curIndex + 1;
如果(指数比;配置。imgNumber - 1) {
指数=0;
}
switchTo(指数& # 39;左# 39;);
}//小圆点点击事件
config.doms.divDots。onclick=function (e) {
如果(e。target。tagName===& # 39; p # 39;) {
var指数=Array.from (this.children) .indexOf (e。target);
switchTo(指数,指数比;config.curIndex& # 63;& # 39;左# 39;:& # 39;对# 39;)
}
}js实现无缝轮播图特效的方法
