南京做微网站,做logo去哪个网站,北京网站优化哪家好,资源站建站技术文章目录 功能htmlcssjavaScript图片 设置了一点小难度#xff0c;不理解的话#xff0c;是不能套用的哦#xff01;#xff01;#xff01; #xff08;下方的圆圈与图片数量不统一#xff0c;而且宽度是固定的#xff09; 下次写一些直接套用的#xff0c;不整这些麻… 文章目录 功能htmlcssjavaScript图片 设置了一点小难度不理解的话是不能套用的哦 下方的圆圈与图片数量不统一而且宽度是固定的 下次写一些直接套用的不整这些麻烦的了
功能
轮播鼠标移入图片后会停止鼠标移出图片后会继续进行轮播左右两个按钮可左右滑动增加节流锁防止快速点击左右按钮下方圆圈可快速进入目标图片
html
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title轮播图/titlelink relstylesheet hrefstyle.cssscript srcjs.js defer/script
/head
body div idmainulliimg srcimg/img12.jpeg alt亥猪/liliimg srcimg/img1.jpeg alt子鼠/liliimg srcimg/img2.jpeg alt丑牛/liliimg srcimg/img3.jpeg alt寅虎/liliimg srcimg/img4.jpeg alt卯兔/liliimg srcimg/img5.jpeg alt辰龙/liliimg srcimg/img6.jpeg alt巳蛇/liliimg srcimg/img7.jpeg alt午马/liliimg srcimg/img8.jpeg alt未羊/liliimg srcimg/img9.jpeg alt申猴/liliimg srcimg/img10.jpeg alt酉鸡/liliimg srcimg/img11.jpeg alt戌狗/liliimg srcimg/img12.jpeg alt亥猪/liliimg srcimg/img1.jpeg alt子鼠/li/ulinput typebutton idleft valueinput typebutton idright value!-- 加一个列表 --ul id selectLili classcircle bgc data-n1/lili classcircle data-n4/lili classcircle data-n7/lili classcircle data-n10/li/ul/div
/body
/htmlcss
* {margin: 0;padding: 0;
}
#main {margin: auto;margin-top: 100px;width: 250px;height: 540px;background-color: aquamarine;overflow: hidden;position: relative;
}
div ul {position: absolute;top: 0px;left: -250px;width: 3500px;transition: 0s ease-in-out;
}
li {float: left;list-style: none;
}
div ul li img {width: 250px;
}
#main #left{width: 20px;height: 40px;z-index: 99;position: absolute;top: 300px;left: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #right{width: 20px;height: 40px;z-index: 99;float: right;position: absolute;top: 300px;right: 0px;background-color: rgba(255, 255, 255, 0.5);font-size: 20px;line-height: 30px;border: none;
}
#main #selectLi {list-style: none;position: absolute;top: 450px;left: 50%;width: 160px;display: flex;justify-content: space-around;height: 20px;transform: translate(-50%, 0);z-index: 99;
}
#main #selectLi li{border-radius: 50%;height: 30px;width: 30px;text-align: center;cursor: pointer;
}
#main #selectLi .circle{background-color: rgba(255, 255, 255, 0.9);
}
#main #selectLi .bgc{background-color: #e74c3c;opacity: 0.9;
}javaScript
let leftBtn document.getElementById(left);
let rightBtn document.getElementById(right);
let imgList document.getElementsByTagName(ul)[0];
// 获取主元素
let main document.getElementById(main);
main.style.height imgList.style.height;// 图片索引
let index 1;
rightBtn.addEventListener(click, (){if(!lock) return;index ;imgList.style.left index * (-250) px;// 增加过渡imgList.style.transition 0.5s ease-in-out;if(index 13){index 1;setTimeout(() {imgList.style.left -250px;// 取消过渡imgList.style.transition none;}, 500)}setCircles();// 关锁lock false;setTimeout((){lock true;}, 500)
})
leftBtn.addEventListener(click, (){if(!lock) return;index --;imgList.style.left index * (-250) px;// 增加过渡imgList.style.transition 0.5s ease-in-out;if(index 0){index 12;setTimeout(() {imgList.style.left -3000px;// 取消过渡imgList.style.transition none;}, 500)}setCircles();// 关锁lock false;setTimeout((){lock true;}, 500)
})
// 获取小圆点
const circles document.querySelectorAll(.circle);
// 高亮设置
function setCircles(){for(let i 0; i circles.length; i){if(i parseInt((index - 1) / 3)){circles[i].classList.add(bgc);}else{circles[i].classList.remove(bgc);}}// circles.forEach((item, index) { // 目标和索引// });
}
// 点击切换图片
const oCircle document.getElementById(selectLi);
oCircle.addEventListener(click, (e){if(e.target.nodeName.toLowerCase() li){// 对应的值const n Number(e.target.getAttribute(data-n));index n;imgList.style.left index * (-250) px;imgList.style.transition 0.5s ease-in-out;setCircles();}
})
// 函数优化
// 设置节流锁
let lock true;
// 自动轮播
function handleRightBtn(){if(!lock) return;index ;imgList.style.left index * (-250) px;// 增加过渡imgList.style.transition 0.5s ease-in-out;if(index 13){index 1;setTimeout(() {imgList.style.left -250px;// 取消过渡imgList.style.transition none;}, 500)}setCircles();// 关锁lock false;setTimeout((){lock true;}, 500)
}
let autoPlay setInterval(handleRightBtn, 1000);
main.onmouseenter function(){clearInterval(autoPlay);
}
main.onmouseleave function(){clearInterval(autoPlay);autoPlay setInterval(handleRightBtn, 1000);
}图片
