js轮播图按钮小案例
案列介绍
我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例。
一、大概步骤
注意:有很多实现的方法,不一定是这一种
1、用无序标签在网页上做出几个小圆点
2、修改每个小圆圈的样式
3、js获取到每个li的元素对象
4、用循环实现点击第n个li时改变li样式
5、注意点击当前li后排除其他的li
二、代码
1.html
代码如下(示例):
<ul><li></li><li></li><li></li><li></li><li></li></ul>
2.css
代码如下(示例):
ul {/* 设置ul的宽度和弹性布局 */width: 120px;display: flex;justify-content: space-evenly;}li {/* 设置每个li的为圆形和默认背景颜色 */list-style: none;width: 20px;height: 20px;border-radius: 50%;background-color: #ccc;}/* 点击后的北京颜色 */.clickli {background-color: red;}/*默认背景颜色 */.libg {background-color: #ccc;}
3.js
核心代码如下(示例):
提示:获取元素的方法还有很多比如 document.querySelectorAll('li')写在注释里了。在js修改元素的样式方法也有多种,在注释里。
//方法:巧用this,单击当前元素时改变//用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象var lis = document.getElementsByTagName('li');// console.log(lis);//利用循环完成点击下标为n时改变第n个元素的背景颜色。for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {//先给所有的li都设置为原来的颜色,要写this前面for (var j = 0; j < lis.length; j++) {// lis[j].style.backgroundColor = '#ccc';lis[j].className = 'libg'}//this指向当前点击的i,索引号为i,点击时改变当前li的背景颜色// this.style.backgroundColor = 'red';this.className = 'clickli'}}
不排除其他li的元素时会是这样的
修改之后
全部代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>ul {/* 设置ul的宽度和弹性布局 */width: 120px;display: flex;justify-content: space-evenly;}li {/* 设置每个li的为圆形和默认背景颜色 */list-style: none;width: 20px;height: 20px;border-radius: 50%;background-color: #ccc;}/* 点击后的北京颜色 */.clickli {background-color: red;}/*默认背景颜色 */.libg {background-color: #ccc;}</style>
</head>
<body><ul><li></li><li></li><li></li><li></li><li></li></ul>
</body>
<script>//方法:巧用this,单击当前元素时改变//用getElementsByTagName获取到所有li元素对象(集合)获取到的是HTMLcollection对象var lis = document.getElementsByTagName('li');// 用querySelectorAll获取所有li元素对象,获取到的是NoteList对象// var lis=document.querySelectorAll('li');// console.log(lis);//利用循环完成点击下标为n时改变第n个元素的背景颜色。for (var i = 0; i < lis.length; i++) {lis[i].onclick = function () {//先给所有的li都设置为原来的颜色,要写this前面for (var j = 0; j < lis.length; j++) {// lis[j].style.backgroundColor = '#ccc';lis[j].className = 'libg'}//this指向当前点击的i,索引号为i,点击时改变当前li的背景颜色// this.style.backgroundColor = 'red';this.className = 'clickli'}}
</script>
</html>
总结:
实现的方式不止一种,有其他方案欢迎评论留言~~❤
js轮播图按钮小案例相关推荐
- JavaScript的案例(数据校验,js轮播图,页面定时弹窗)
1.数据校验 步骤 1.确定事件(onsubmit)并绑定一个函数 2.书写这个函数,获取数据,并绑定id ...
- php 走马灯轮播,Vue.js轮播图走马灯代码实例(全)
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
- JS轮播图(网易云轮播图)
JS 轮播图 写在前面 最聪明的人是最不愿浪费时间的人.--但丁 实现功能 图片自动切换 鼠标移入停止自动播放,显示按钮 点击按钮,实现前后翻 鼠标移入小圆圈,可以跳转到对应图片 点击左右两侧图片部分 ...
- js 轮播图(使用class实现)
js 轮播图(使用class实现) 纯属无聊,还花了一晚上时间o(╥﹏╥)o 1. js部分的代码 /*** 判断对象是否为DOM元素* @param {Object} obj* @returns*/ ...
- js 轮播图(透明度)
js 轮播图(透明度) 用透明度的方式来实现轮播图 先说下思路,我们首先应该考虑下页面的结构. 第一,我们在做网站的时候,不可能一个页面都是轮播图,所以我们首先需要一个大的盒子,来把轮播图包起来,这里 ...
- JS 轮播图 图片切换(定时器)
标题JS 轮播图 图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
- JS轮播图(点击切换、自动播放、悬停控制)
JS轮播图 轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
- html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变 效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
- html 轮播切图,JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下 需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图 效果图: 思路 通过编写过渡动画实现轮播效果,图片的出现 ...
最新文章
- IntelliJ IDEA 2019.3发布,饱受性能诟病的2019.2版本终于成为过去式
- 【注意】关于Redis存在远程命令执行漏洞的安全公告
- python 3.6
- python读取excel
- 世界之窗浏览器怎么隐藏收藏栏?
- codevs 1422 河城荷取
- 昨天一冲动,给头儿说留所了。。。
- 未能加载文件或程序集“XXX”或它的某一个依赖项。试图加载格式不正确的程序。...
- PythonAM3_统计量分析
- 2017/2/25 学习笔记
- html实现宿舍管理系统,宿舍管理系统部分代码实现
- NOI题库答案(1.2 编程基础之变量定义、赋值及转换)
- python程序设计实训心得体会_20194220 实验四《Python程序设计》实验报告
- 斐讯K2 烧写第三方固件的简单方法
- /etc/shadow可以破解吗?
- DNSPod十问纪中展:从摇滚文青到科学队长
- office(word)如何使用格式刷的方法。
- 我在北大青鸟的工作经历
- windows server 2016 搭建AD域服务
- Andriod电子词典查询功能的实现