JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）

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

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

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

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部分

       <div class="banner"><ul class="imgList"><li><img src="banner/1.png"/></li><li><img src="banner/2.jpg"/></li><li><img src="banner/3.jpg"/></li><li><img src="banner/4.jpg"/></li></ul><div class="circle"><!-- <a href="javascript:;"></a><a href="javascript:;"></a><a href="javascript:;"></a> --></div></div>

JS部分

        <!-- 实现 点击小圆点 图片滑动  小圆点样式改变 --><script type="text/javascript">// 确定ul的宽度 动态的创建小圆点var imgList = document.querySelector('.imgList');var circle = document.querySelector('.circle');var circleA = circle.children;// thisIndex默认索引值是0var 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 <circleA.length; i++) {circleA[i].className = '';}circleA[thisIndex].className = 'hover';}               }                   </script>

动态效果图如下：

JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）相关推荐

网页轮播图制作（html+css+js）
1.目标目的:用于自己做记录,记录制作的过程以及遇到的一些问题.内容参考来自b站的up主:黑马前端的pink老师JavaScript基础语法课程. 2.功能需求 (1)当鼠标经过轮播图,左右两边的 ...
JavaScript实现网页轮播图
轮播图也成为焦点图,是网页中比较常见的网页特效一.功能: 1.鼠标经过轮播图模块,左右两边的按钮显示,鼠标离开轮播图模块,就隐藏左右按钮. 2.点击右(左)侧按钮一次,图片往左(右)播放一张,一以此 ...
【JavaScript】网页轮播图
目录 HTML搭建功能实现小圆圈事件左右按钮事件自动播放轮播图也叫焦点图,是网页中比较常见的网页特效. 功能: 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮. 点击右侧按钮一次,图片往 ...
用javascript做网页轮播图
文章目录网页轮播图: 功能需求: 动图展示: 代码分析: 主题结构部分: 样式设置: 交互效果: 引用缓动动画(图片滚动的效果) 网页轮播图: 轮播图也称为焦点图,是网页中比较常见的网页特效. 功能 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
网页轮播图+缓动效果
实现某宝上面的网页轮播图+缓动效果代码和注释: <!DOCTYPE html> <html lang="en"><head><meta ...
web前端html图片轮播,如何使用LayUI实现网页轮播图_WEB前端开发,layui,轮播图
关于html5中自定义属性的介绍_WEB前端开发 html5为我们提供了以[data-]为前缀定义需要的属性即可设置自定义属性,如[ ].本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参 ...
Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例
动画实现原理核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置让盒子在当前位置加上1个移动距离利用定时器不断重复这个操作加一个结束定时器的条件 ...
html 轮播图自适应,JavaScript 自适应轮播图
JavaScript 自适应轮播图代码话不多说,先上代码,方便复制粘贴.演示轮播图 *{ margin: 0; padding: 0; } ul{ list-style: none; } img ...

JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）

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

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

css部分

html部分

JS部分

动态效果图如下：

JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）相关推荐

最新文章

热门文章

JavaScript——网页轮播图（ 实现点击小圆点、图片滑动、小圆点样式改变）

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

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

css部分

html部分

JS部分

动态效果图如下：

JavaScript——网页轮播图（ 实现点击小圆点、图片滑动、小圆点样式改变）相关推荐

最新文章

热门文章

JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）

JavaScript——网页轮播图（实现点击小圆点、图片滑动、小圆点样式改变）相关推荐