网站建设哪个最好,wordpress点击换图,建设机械网站平台,住房和城乡建设统计网站轮播效果#xff1a;
1、鼠标没有移入到banner,自动轮播 2、鼠标移入#xff1a;取消自动轮播、移除开始自动轮播 3、点击指示点开始轮播到对应位置 4、点击前一个后一个按钮#xff0c;轮播到上一个下一个图片 注意
最后一个图片无缝滚动#xff0c;就是先克隆第一个图片…轮播效果
1、鼠标没有移入到banner,自动轮播 2、鼠标移入取消自动轮播、移除开始自动轮播 3、点击指示点开始轮播到对应位置 4、点击前一个后一个按钮轮播到上一个下一个图片 注意
最后一个图片无缝滚动就是先克隆第一个图片把它放到最后面。 当轮播到最后视觉最后一个图片下一个图片理想应该是播放第一个但是这样直接到第一个会很生硬所以在最后克隆了第一个图片这样就会平滑的从视觉效果过度到第一个再次播放下一个图的时候则使用xx.style.left 0属性快速切为第一个(无动画效果)
轮播图.html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- 加载动画 --script srcjs/animate.js/scriptscript srcjs/banner.js/scriptstyle*{margin: 0;}.box{width: 100vw;height: 100vh;padding-top:20px ;background-color: aliceblue;box-sizing: border-box ;}.box .ul-box{position: relative;margin: auto;width: 450px;height: 230px;overflow: hidden;/* background-color: #ff00aa; */}.ul-box #img-ul{position: absolute;width: 400%;/* 去除li样式 */list-style: none; /* 移除列表项前的符号 */padding-left: 0;margin: 0}.ul-box #img-ul li{background-color: rgb(202, 214, 225);/* opacity: 0.2; */width: 450px;height: 230px;float: left;}.ul-box #img-ul li img{width: 450px;height: 230px;}#dot-ul{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;background-color: rgb(232, 234, 234);opacity: 0.8;list-style: none; /* 移除列表项前的符号 */padding-left: 0;margin: 0;border-radius: 12px;}#dot-ul li{margin: 5px;height:10px;width: 10px;border: 1px solid #ffffff;border-radius: 50%;}.active{background-color: #ffffff;}.un-active{background-color: none;}/* 按钮 */#left-btn,#right-btn{position: absolute;top: 50%;transform: translateY(-50%);background-color: aliceblue;opacity: 0.5;border-radius: 5px;color: rgb(66, 66, 56);padding: 2px;}#left-btn{left: 0;}#right-btn{right: 0;}/style
/head
bodydiv classboxdiv classul-box idul-boxul idimg-ulliimg src./imgs/1.png/lili img src./imgs/2.png/lili img src./imgs/3.png/li/ulul iddot-ul!-- li classactive /lili /lili /li --/uldiv idleft-btn/divdiv idright-btn/div/div/div
/body
/htmljs文件夹下banner.js
window.addEventListener(load, () {let timeGap 20let allTime 500let picWidth 450let playTimer null //自动播放let palyTime 2000 allTimelet currentIndex 0 //当前播放// 包裹盒子let ulBox document.getElementById(ul-box)// 获取ullet imgUlEl document.getElementById(img-ul)// 获取img ul下的li个数let imgLiElList imgUlEl.getElementsByTagName(li)// 指示点 ullet dotUlEl document.getElementById(dot-ul)// 创建知识点 lifor (let i 0; i imgLiElList.length; i) {// 创建元素let liEl document.createElement(li)liEl.id dotli- idotUlEl.appendChild(liEl)}// 克隆第一个图片if (imgLiElList.length) {let firstPicEl imgLiElList[0]let cloneEl firstPicEl.cloneNode(true)imgUlEl.appendChild(cloneEl)}// 获取指示点 li列表let dotLiEllist dotUlEl.getElementsByTagName(li)//修改dot状态function changeDot() {for (let j 0; j dotLiEllist.length; j) {let itemEl dotLiEllist[j]itemEl.className un-active}if (currentIndex dotLiEllist.length) {// 如果是最后一个克隆的照片则默认指示点是第一个dotLiEllist[0].className active} else {dotLiEllist[currentIndex].className active}}// 第一个设置原点激活样式currentIndex 0changeDot()// 指示点添加点击事件for (let i 0; i dotLiEllist.length; i) {let elI dotLiEllist[i]elI.addEventListener(click, () {// 修改当前状态currentIndex i//修改dot状态changeDot()// 计算需要移动的距离let distance -picWidth * iconsole.log(distance)animate(imgUlEl, distance, timeGap, allTime)})}// 鼠标移动去除自动播放ulBox.addEventListener(mouseover, () {console.log(mouseover)if (playTimer) {clearTimeout(playTimer)}})// 鼠标移除自动播放ulBox.addEventListener(mouseleave, () {console.log(mouseleave)autoPlay()})// 自动播放图片function autoPlay() {playTimer setTimeout(() {if (currentIndex dotLiEllist.length) {currentIndex 0imgUlEl.style.left 0}currentIndex//判断是否是最后一个图片animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime, () {//修改dot状态changeDot()if (playTimer) {clearTimeout(playTimer)}autoPlay()})}, palyTime)}//调用自动播放autoPlay()// 按钮添加点击事件let btnLeft document.getElementById(left-btn)let btnRight document.getElementById(right-btn)btnLeft.style.cursor grabbtnRight.style.cursor grabbtnLeft.addEventListener(click, () {if (currentIndex 0) {currentIndex--animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime)changeDot()}})btnRight.addEventListener(click, () {// 滑动到最后一个克隆的照片if (currentIndex dotLiEllist.length) {currentIndex 1imgUlEl.style.left 0} else {currentIndex}animate(imgUlEl, -picWidth * currentIndex, timeGap, allTime)changeDot()})
})
js文件夹下animate.js
// 给元素添加动画效果
// targetPosition 目标位置
// timeGap 每次移动时间间隔
// allTime 花费多久移动完
// callBack 回调函数
function animate(el, targetPosition, timeGap 100, allTime 1000, callBack) {let offsetX el.offsetLeft//需要移动位置let distance targetPosition - offsetX// 每隔一段时间移动一段距离let moveCount allTime / timeGap // 总共移动多少次let moveDistance distance / moveCount //每次移动多少距离let timer setInterval(() {// console.log(moveCount, moveDistance)offsetX el.offsetLeft //相对父元素的距离el.style.left offsetX moveDistance pxmoveCount-- //移动次数减少distance distance - moveDistance //总共需要移动的距离if (moveCount 0) {//防止没有计算完el.style.left targetPosition px// 执行回调callBack ? callBack() : clearInterval(timer)}}, timeGap)
}
图片资源
放到imgs文件夹下即可对应命名为1.png、2.png、3.png即可
纯属参考可能会存在很多bug
