JavaScript

2024-05-31 01:50| 来源: 网络整理| 查看: 265

一、轮播图要实现的效果：

实现点击小圆点、图片滑动、小圆点样式改变

二、轮播图实现效果步骤：

1.利用html+css完成轮播图片，底部小点的整体效果的布局。

2.通过原生js完成图片轮播，无缝自动切换，底部小点随图片切换而切换。

css部分 *{ padding: 0px; margin: 0px; } .banner{ width: 600px; margin: auto; border: 10px solid green; height: 350px; position: relative; overflow: hidden; } .imgList img{ width: 600px; height: 350px; } .imgList{ /* 绝对定位 */ position: absolute; /* left:-600px; */ /* width: 2600px; */ } .imgList li{ float:left; margin-right: 20px; list-style: none; } .circle{ position: absolute; bottom: 15px;left:50%; transform:translateX(-50%);} .circle a{ width: 15px; height: 15px; background: green; display: block; border-radius: 50%; opacity: .8; float: left; margin-right: 10px; } .circle a.hover{ background: black; opacity: .7; } html部分 JS部分 // 确定ul的宽度动态的创建小圆点 var imgList = document.querySelector('.imgList'); var circle = document.querySelector('.circle'); var circleA = circle.children; // thisIndex默认索引值是0 var thisIndex = 0; // console.log(imgList.children.length); // window.onload延迟加载函数 window.onload = function(){ //给ui标签设置宽度 imgList.style.width =imgList.children.length*620+'px'; //下面动态创建a标签 for (var i = 0; i < imgList.children.length; i++) { var aNode = document.createElement('a'); //我们在这里创建index属性来记录索引值 aNode.setAttribute('index',i); circle.appendChild(aNode); } //给小圆点加点击事件 circle.addEventListener('click',function(e){ //这里给a标签点击事件有个小bug 就是我们鼠标点击到.circle标签时候图片也滑动了 //解决上面小bug的方法 if(e.target.nodeName !='A'){ return false; } // e.target指向的是a标签 console.log(e.target); // console.log(e.target.nodeName); // 获得索引值 thisIndex = e.target.getAttribute('index'); // console.log(thisIndex); //图片移动的规则 0索引值 ->0 1 ->-1*620 2 ->-2*620 imgList.style.left = -thisIndex*620+'px'; //调用小圆点改变样式的函数 circlechange(); }) function circlechange(){ //先清除样式再添加样式 for (var i = 0; i

【本文地址】

JavaScript

JavaScript

今日新闻

推荐新闻