JS轮播图（点击切换、自动播放、悬停控制）

您所在的位置：网站首页 › 点击切换图片js › JS轮播图（点击切换、自动播放、悬停控制）

JS轮播图（点击切换、自动播放、悬停控制）

2024-03-23 06:34| 来源: 网络整理| 查看: 265

JS轮播图

轮播图可以说是网页上十分常见的效果，很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来，那么轮播图就是一个很不错的练手实例。下面就是通过JS写的轮播图效果：

功能介绍

1.上/下按钮切换图片 2.点击圆点按钮切换到相应的图片 3.自动播放效果 (4秒间隔) 4.当鼠标放在图片上时，停止轮播效果；鼠标移开图片时，又出现轮播效果

实现方法如下： html代码 One Two Three Four Five > CSS代码如下：

本文写的轮播图，主要依靠opacity属性的值来控制

.img { position: absolute; top: 100px; left: 50%; width: 480px; height: 270px; margin-left: -240px; color: #FFFFFF; /*设置图片默认透明度为0 */ opacity: 0; /*设置图片过度效果，会出现淡入淡出效果 */ transition: all .8s; } .img:nth-child(1){ background: url("background/text1.jpg"); background-size: 100%; } .img:nth-child(2){ background: url("background/text2.jpg"); background-size: 100%; } .img:nth-child(3){ background: url("background/text3.jpg"); background-size: 100%; } .img:nth-child(4){ background: url("background/text4.jpg"); background-size: 100%; } .img:nth-child(5){ background: url("background/text5.jpg"); background-size: 100%; } .prev { position: absolute; top: 185px; left: 50%; width: 20px; height: 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 0 5px 5px 0; margin-top: 30px; margin-left: -240px; color: #c2c1cb; text-align: center; background-color: rgba(255, 255, 255, .2); cursor: pointer; } .next { position: absolute; top: 185px; left: 50%; width: 20px; height: 30px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 5px 0 0 5px; margin-top: 30px; margin-left: 218px; color: #c2c1cb; text-align: center; background-color: rgba(255, 255, 255, .2); cursor: pointer; } .next:hover, .prev:hover { background-color: rgba(1, 1, 1, 0.73); color: #FFFFFF; } .div1 { position: absolute; top: 350px; left: 50%; margin-left: -40px; } .little { float: left; width: 10px; height: 10px; border-radius: 100%; background-color: rgba(255, 245, 244, .3); margin-left: 4px; cursor: pointer; border: 1px solid #464646; } .show{ /*通过添加show，改变图片透明度，从而实现切换效果*/ opacity: 1; } .little_show { background-color: #FFFFFF; } JS代码如下： let img = document.getElementsByClassName("img"); //获取所有轮播图片集合 let next = document.querySelector(".next"); //获取下一张按钮 let prev = document.querySelector(".prev");//获取上一张按钮 let box = document.getElementById("Box");//获取整个盒子 let little = document.getElementsByClassName("little"); //获取所有轮播圆点按钮集合 let index = 0; let time = 0; // 重置所有class let clear = function () { for (let i = 0;i

【本文地址】

JS轮播图（点击切换、自动播放、悬停控制）

JS轮播图（点击切换、自动播放、悬停控制）

今日新闻

推荐新闻