手动轮播图

开发思路：

网页布局，完成基本的网页格式；
实现按钮的点击事件；
实现按钮点击时，图片的切换；
实现按钮点击时，数字改变( 4/8 )；
实现按钮点击时，标题改变

  <style>* {padding: 0;margin: 0;}img {width: 600px;height: 450px;display: block;margin: auto;}#container {width: 800px;height: 500px;margin: auto;position: relative;/* background: gray; */}p {text-align: center;}button {position: absolute;width: 50px;height: 100px;top: 200px;opacity: .3;}button:nth-of-type(2) {right: 0;}</style>

<body><div id="container"><p> <span id="snum">1</span>/8</p><img src="data:image/m10.jpg" alt="" id="cover"><p id="name">珊瑚</p><button>&lt;</button><button>&gt;</button></div><script>// 声明一个数组，把图片路径添加进来var images = ["image/m10.jpg", "image/m11.jpg", "image/玉梦.webp", "image/李宁玉.webp", "image/顾晓梦.webp", "image/金生火.webp", "image/白小年.webp", "image/吴志国.webp"]//声明一个变量，表示当前显示的图片// 声明一个数组，存储每张图片对应的名称var imgNames = ["珊瑚", "文咏珊", "玉梦", "李宁玉","顾晓梦", "金生火", "白小年", "吴志国"]var n = 0//获取按钮var btns = document.getElementsByTagName("button")console.log(btns)for (var i = 0; i < btns.length; i++) {btns[i].onmouseover = function () {this.style.opacity = .8}btns[i].onmouseout = function () {this.style.opacity = .3}}//获取图片标签var cover = document.getElementById("cover")//获取显示图片数量的span标签var snum = document.getElementById("snum")// 获取显示标题的标签var namex = document.getElementById("name")//点击按钮，显示上一张图片btns[0].onclick = function () {n--if (n < 0) {n = 7}//更新图片cover.src = images[n]//更新数字snum.innerText = n + 1//更新标题namex.innerText = imgNames[n]}//点击按钮，显示下一张图片btns[1].onclick = function () {n++if (n > 7) {n = 0}//更新图片cover.src = images[n]//更新数字snum.innerText = n + 1//更新标题namex.innerText = imgNames[n]}</script>
</body>

运行结果：

2021-09-30 js手动轮播图相关推荐

原生JS制作自动+手动轮播图，附带二级分类菜单
原生JS制作自动+手动轮播图,附带二级分类菜单包含以下功能: 1.鼠标移开自动轮播 2.鼠标移入停止自动轮播 3.点击左右按钮可手动切换图片 4.点击索引小圆点可手动切换图片 5.鼠标移入一级菜单展 ...
纯前端实现—手动轮播图
实现效果: 前面有篇文讲解过初级轮播图--https://gu-han-zhe.blog.csdn.net/article/details/121309051,效果有点低级,所以这篇给B格提升些! 共 ...
自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
HTML、CSS、JS实现轮播图效果:包含分页按钮及切换箭头
HTML页面: 页面布局 <!DOCTYPE html> <html lang="en"> <head><meta charset=&qu ...
【HTML+CSS+JS】模仿星巴克主页，练习CSS排版，JS实现轮播图以及悬停动画（公开完整源码）
目录:完整源码仅供学习一.效果演示二.完整源代码 2.1 HTML代码 2.2 JS代码 2.3 CSS代码 2.3.1 index.css 2.3.2 base.css 三.完整项目下载一.效 ...
MUI - 自动轮播图实现
轮播图的设置,可手动,也可自动轮播.全凭代码一句话. 截图示下: 下面直接上代码,请参考. 代码如下: <!DOCTYPE html> <html><head>&l ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
轮播图实现html,html、css、js实现轮播图
2017-03-13 今天把轮播图的知识1过了一下,写了一个比较简单的轮播图,给大家参考一下. 查看具体的效果点击这个链接 : http://gjhnstxu.me/%E8%BD%AE%E6%92%A ...

2021-09-30 js手动轮播图

手动轮播图

开发思路：

2021-09-30 js手动轮播图相关推荐

最新文章

热门文章