彭州建设网站,深圳网站设计兴田德润i优惠吗,信息公司网站建设方案+游戏,深圳h5网站建设近日#xff0c;在浏览网站的时候#xff0c;发现了一个有意思的效果#xff1a;一个图片轮播#xff0c;通过上下滚动鼠标滚轮控制图片的上下切换。
于是就有了自己做一个的想法#xff0c;顺带复习下鼠标滚轮事件。
鼠标滚轮事件#xff0c;参考这篇文章#xff1a;…近日在浏览网站的时候发现了一个有意思的效果一个图片轮播通过上下滚动鼠标滚轮控制图片的上下切换。
于是就有了自己做一个的想法顺带复习下鼠标滚轮事件。
鼠标滚轮事件参考这篇文章鼠标滚轮事件-CSDN博客
一、HTML和CSS
无论怎么样的滚动首先要制作图片轮播的结构和样式。
HTML
div classbox idboxul classlist idlistliimg src../images/pic1.jpg alt/liliimg src../images/pic2.jpg alt/liliimg src../images/pic3.jpg alt/liliimg src../images/pic4.jpg alt/liliimg src../images/pic5.jpg alt/li/ul div classdots iddots/div
/div
HTML结构很简单就是一个 div 里面套了两个结构图片区和控制点区。
图片区 ul#list就是一个 ul里面有多个 li 嵌套了图片。控制点区 div#dots 没有内容这是因为控制点要根据图片的数量ul 的 li 个数动态生成。
CSS
*{margin: 0;padding: 0;
}
ul,li,ol{list-style: none;
}
.box{width: 600px;height: 399px;border:20px #000 solid;margin-left: auto;margin-right: auto;overflow: hidden;position: relative;margin-top: 100px;
}
.list{position: relative;
}
.list img{display: block;
}
.list li{width: 600px;height: 399px;overflow: hidden;
}
.box .dots{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;background: rgba(255,255,255,0.5);padding: 5px;border-radius: 30px;
}
.box .dots span{display: block;width: 15px;height: 15px;background: #fff;border-radius: 50%;margin-left: 5px;margin-right: 5px;cursor: pointer;
}
.box .dots span.active{background: #f30;
}
CSS代码如上就不分析了反正就这样。强调两点
整个 div.box 要相对定位约束绝对定位的控制点区 div#dotsul.list 也要相对定位因为要复制第一个图放到最后复制最后一个图放到第一图的前面。复制出来的图都是绝对定位的。 二、JS
1. 为了防止重复执行滚动事件写一个 flag当为 true 的时候就不执行滚动事件。默认值为 false。
let isScroll false;
2. 根据图片的个数动态生成点span。为了防止过度操作 DOM使用了 createDocumentFragment 缓存生成的span 标签。
let li list.querySelectorAll(li);
let li_len li.length;
let index 0;
let wrap document.createDocumentFragment();
// 初始化工作
for(let i 0; i li_len; i){let span document.createElement(span);span.dataset.index i;if(i 0){span.classList.add(active);}wrap.appendChild(span);span.addEventListener(click,function(){index this.dataset.index;changePic(index);} );
}
dots.appendChild(wrap);
3. 上下移动图片就是在控制图片的 transform 的 translateY 属性。
// 图片切换函数index
function nextPic(){index;if( index li_len ){index 0;list.style.transform translateY(399px); // 调整list位置document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 图片切换函数index--
function prevPic(){index--;if( index 0 ){index li_len - 1;list.style.transform translateY( (-399*li_len) px);document.body.offsetHeight; // 强制重绘HTML}changePic(index);
} 4. 切换图片就是在换图已经更改控制点的样式。
// 切换图片
function changePic(index){// 点的切换let dotsBros findeBros(dots_span[index]);dots_span[index].classList.add(active);dotsBros.forEach(function(item){item.classList.remove(active);});// 图片切换isScroll true;list.style.transform translateY( (-index * 399) px);list.style.transition transform 0.5s;document.body.offsetHeight; // 强制重绘HTML
}
5. 当动画结束的时候就要恢复 flag 变量的值为 flase并且去掉图片的过渡动画。
// 动画结束时恢复初始状态
list.addEventListener(transitionend,function(){isScroll false;list.style.transition none;});
6. 滚动事件判断滚轮值的正负选择上还是下滚动图片。
// 鼠标滚轮事件
box.addEventListener(wheel,function(e){e.preventDefault();let delta e.deltaY;if(delta 0 isScroll false ){nextPic();}else if(delta 0 isScroll false){prevPic();}
},{passive: false
}); 完整JS代码
let box document.getElementById(box);
let list document.getElementById(list);
let dots document.getElementById(dots);
let isScroll false;let li list.querySelectorAll(li);
let li_len li.length;
let index 0;
let wrap document.createDocumentFragment();
// 初始化工作
for(let i 0; i li_len; i){let span document.createElement(span);span.dataset.index i;if(i 0){span.classList.add(active);}wrap.appendChild(span);span.addEventListener(click,function(){index this.dataset.index;changePic(index);} );
}
dots.appendChild(wrap);
let dots_span dots.children;
// 初始图片
let liFirst li[0];
let liLast li[li_len - 1];
let newLiFirst liFirst.cloneNode(true);
let newLiLast liLast.cloneNode(true);
list.appendChild(newLiFirst);
list.appendChild(newLiLast);
newLiLast.style.position absolute;
newLiLast.style.top -399px;
newLiLast.style.left 0;
// 工具函数获取兄弟节点
function findeBros(tag){let bros [];let parent tag.parentNode;for(let i 0; i parent.children.length; i){if(parent.children[i] ! tag){bros.push(parent.children[i]);}}return bros;
}
// 图片切换函数index
function nextPic(){index;if( index li_len ){index 0;list.style.transform translateY(399px); // 调整list位置document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 图片切换函数index--function prevPic(){index--;if( index 0 ){index li_len - 1;list.style.transform translateY( (-399*li_len) px);document.body.offsetHeight; // 强制重绘HTML}changePic(index);
}// 切换图片
function changePic(index){// 点的切换let dotsBros findeBros(dots_span[index]);dots_span[index].classList.add(active);dotsBros.forEach(function(item){item.classList.remove(active);});// 图片切换isScroll true;list.style.transform translateY( (-index * 399) px);list.style.transition transform 0.5s;document.body.offsetHeight; // 强制重绘HTML
}
// 动画结束时恢复初始状态
list.addEventListener(transitionend,function(){isScroll false;list.style.transition none;
});// 鼠标滚轮事件
box.addEventListener(wheel,function(e){e.preventDefault();let delta e.deltaY;if(delta 0 isScroll false ){nextPic();}else if(delta 0 isScroll false){prevPic();}
},{passive: false
});
