🤞 点击可跳转个人主页
🐱🏍发现的一个宝藏网站
😁💋给兄弟们安利一个最近发现的很好刷题学习网站，上面包含了很多东西，有面试相关的题目，各厂的大题，还有学习的知识点，甚至还有专项练习 ,是一个很值得我们去练习刷题的好网站点击我就可以到哦
实现该轮播图有以下几个要点：
(1)在左右两侧各有一个箭头，分别指的是向左和向右切换，即点击相应的位置就会切换到该图片之前(或之后)的一张图片
(2)在图片的下方有一排圆形按钮，每个按钮有各自的单击事件，点击任意一个按钮就切换到对应的图片
(3)不点击图片时，图片会自动播放，即有一个图片轮播效果
代码展示
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">*{padding: 0px;margin: 0px;}.banner{width: 600px;height: 350px;border: 10px solid red;margin: auto;position: relative;overflow: hidden;}li{list-style: none;}.banner ul {/* width: 2440px; */position: absolute;/* left:-1220px; */}.banner ul li{width: 600px;height: 350px;float: left;margin-right: 10px;}.banner ul li img{width: 100%;height: 100%;}.circle{position: absolute;bottom: 25px;left: 50%;transform: translateX(-50%);}.circle a{display: block;width: 15px;height: 15px;border-radius: 50%;float: left;margin-right: 10px;cursor: pointer;background: #fff;opacity: 0.5;}.circle a.hover{background: #000;opacity: 0.9;}</style></head><body><div class="banner"><ul><li><img src="banner1.jpg"/></li><li><img src="banner2.jpg"/></li><li><img src="banner3.jpg"/></li><li><img src="banner4.jpg"/></li></ul><div class="circle"></div></div><script>var banner = document.querySelector(".banner");var lis = banner.children[0].children;var circle = document.querySelector(".circle");var thisindex=0;//默认就是第一个var flag = true;//true可以执行//给ul设置宽度banner.children[0].style.width = lis.length * 610 + "px";//自定义生成圈圈for(var i=0;i<lis.length;i++){var aNode = document.createElement("a");if(i==0){aNode.className = "hover";}aNode.setAttribute("index",i);//设置当前的自定义属性indexcircle.appendChild(aNode);}circle.addEventListener("click",function(e){if(e.target.nodeName!="A"){return false;}thisindex = e.target.getAttribute("index");//设置当前选中的值if(flag){ //如果没有锁死就让你执行slow(banner.children[0],-thisindex*610,function(){flag = true;//解锁});changecircle();//更改状态}})//自动切换function autoChange(){setInterval(function(){thisindex++;if(thisindex == lis.length){thisindex = 0;}if(flag){ //如果没有锁死就让你执行slow(banner.children[0],-thisindex*610,function(){flag = true;//解锁});changecircle();//更改状态}},3000);}// 更改圆圈的状态function changecircle(){for(var i=0;i<circle.children.length;i++){circle.children[i].className = "";}circle.children[thisindex].className = "hover"; }//缓动的效果function slow(obj,target=100,callback){flag = false;//锁住动画obj.myinter = setInterval(function(){var step = (target-obj.offsetLeft)/10;step = step>0?Math.ceil(step):Math.floor(step);if(obj.offsetLeft == target){clearInterval(obj.myinter);callback && callback();}else{obj.style.left = obj.offsetLeft + step + "px";}},30);}autoChange();</script></body></html>
