🤞 点击可跳转个人主页
🐱🏍发现的一个宝藏网站
😁💋给兄弟们安利一个最近发现的很好刷题学习网站，上面包含了很多东西，有面试相关的题目，各厂的大题，还有学习的知识点，甚至还有专项练习 ,是一个很值得我们去练习刷题的好网站点击我就可以到哦
实现该轮播图有以下几个要点：
(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);//设置当前的自定义属性index
circle.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>
本文转载自: https://blog.csdn.net/tea_tea_/article/details/126652670
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。
版权归原作者 小杨要努力哇 所有， 如有侵权，请联系我们删除。