Html+CSS+JS轮播图：手动轮播，自动轮播

演示效果

轮播图代码：

<!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>.banner {width: 500px;height: 300px;position: relative;/* border: 1px solid red; */margin: 100px auto;}.banner .wrap {width: 100%;}.banner .wrap .item {width: 100%;}.item img {width: 500px;height: 300px;vertical-align: top;position: absolute;}.div1 {position: absolute;left: 0;top: 50%;transform: translatey(-50%);cursor: pointer;width: 41px;height: 69px;font-size: 30px;line-height: 70px;text-align: center;color: #D6D8D4;background-color: rgba(0, 0, 0, 0.3);}.div2 {position: absolute;right: 0;top: 50%;transform: translatey(-50%);cursor: pointer;width: 41px;height: 69px;font-size: 30px;line-height: 70px;text-align: center;color: #D6D8D4;background-color: rgba(0, 0, 0, 0.3);}.pagenation {position: absolute;/* border: 1px solid red; */left: 50%;transform: translateX(-50%);display: flex;bottom: 40px;}.pagenation>div {width: 10px;height: 10px;border-radius: 50%;background-color: white;margin-right: 10px;cursor: pointer;}.pagenation>div:last-child {margin-right: 0;}</style>
</head>
<body><div class="banner"><div class="warp"><div class="item"><img src="./img/1.jpg" alt=""></div><div class="item"><img src="./img/2.jpg" alt=""></div><div class="item"><img src="./img/3.jpg" alt=""></div><div class="item"><img src="./img/4.jpg" alt=""></div></div><div class="div1"><</div> <div class="div2 ">></div><!-- 小圆点 --><div class="pagenation"><div id="pagenation-item0"></div><div id="pagenation-item1"></div><div id="pagenation-item2"></div><div id="pagenation-item3"></div></div></div><script>var index = 0; //定义初始下标var banner = document.getElementsByClassName("banner")[0];var itemList = document.getElementsByClassName("item");var pagenationList = document.querySelectorAll(".pagenation>div");var pagenation = document.querySelector(".pagenation");itemList[0].style.opacity = 1;pagenationList[0].style.background = "blue" //初始第一张图对应的小圆点的颜色为蓝色var up = document.getElementsByClassName("div1")[0];var next = document.getElementsByClassName("div2")[0];//下一张图片（封装方便下面自动播放定时器调用）function nextFn() {index = index >= itemList.length - 1 ? 0 : ++index; //判断点击到了最后一张图片再次点击返回到第一张图for (var i = 0; i < itemList.length; i++) {itemList[i].style.opacity = 0; //图片透明度为0图片隐藏pagenationList[i].style.background = "white " //图片没显现小圆点的颜色为白色}itemList[index].style.transition = "opacity 1s ease .2s"itemList[index].style.opacity = 1; //图片透明度为1图片显现pagenationList[index].style.background = "blue" //图片显现小圆点的颜色为蓝色}next.onclick = nextFn; //下一张（点击事件）点击切换下一张图片up.onclick = function () { //上一张（点击事件）点击切换上一张图片index = index <= 0 ? itemList.length - 1 : --index; //判断点击到了第一张图片再次点击返回到最后一张图for (var i = 0; i < itemList.length; i++) {itemList[i].style.opacity = 0;pagenationList[i].style.background = "white"}itemList[index].style.transition = "opacity 1s ease .2s" //增加过渡效果itemList[index].style.opacity = 1;pagenationList[index].style.background = "blue"}//设置定时器，自动向下播放图片var t1 = setInterval(nextFn, 2000) banner.onmouseover = function () {clearInterval(t1);}banner.onmouseout = function () {t1 = setInterval(nextFn, 2000)}// 事件委托pagenation.onclick = function (event) {event = window.event || eventconsole.log(event);if (event.target.className == "pagenation") {console.log("点击的是父元素");} else {var id = event.target.id;var photoIndex = null;for (var i = 0; i < pagenationList.length; i++) {pagenationList[i].style.background = "white"if (id.indexOf(i) >= 0) {photoIndex = i;}}event.target.style.background = "blue"index = photoIndex; // 将小圆点对应的下标与图片下标对应for (var i = 0; i < itemList.length; i++) {itemList[i].style.opacity = 0;}itemList[index].style.transition = "opacity 1s ease .2s"itemList[photoIndex].style.opacity = 1;}}</script>
</body></html>

Html+CSS+JS轮播图：手动轮播，自动轮播相关推荐

js轮播图(手动轮播＋自动轮播)
效果图一.先获取一下需要用到的元素 var leftbtn=document.querySelector('.leftbtn'); //左按钮var rightbtn=document.queryS ...
定时器轮播图---（功能：自动轮播，左右箭头点击切换，点击圆点跳转图片）
定时器轮播图几个部分: 封装重复函数左右箭头点击切换效果自动轮播-定时器控制(模拟左箭头点击效果以显示出自动轮播的效果).鼠标移入停止,移出继续效果点击圆点跳转相应页面(解决了点击后不继续轮播 ...
css+ js轮播效果
css+ js 图片/视频轮播效果 <!DOCTYPE HTML> <head><meta charset="utf-8"><link r ...
css js 打印背景图
参考:https://blog.csdn.net/lidysun/article/details/88995208 如果不对浏览器设置,直接打印时是无法打印背景图的. 方法1:css @media p ...
vue写一个轮播图实例（没有自动轮播）
要点: 1.<li v-for="(item,index) in arr" v-on:click="lick(item)"><!-- 第{{i ...
Android轮播图 banner，图片视频混播banner
1.使用Android循环滚动控件--ViewFlipper实现方法:https://blog.csdn.net/meixi_android/article/details/84615857 2.使用 ...
原生JS实现PC端无缝滚动轮播图、匀速轮播图、匀速动画
offset家族的了解 1.offsetHeight:元素的offsetHeight是一种元素CSS高度的衡量标准,包括元素的边框.内边距和元素的水平滚动条(如果存在且渲染的话),不包含:before ...
英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】
上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...

Html+CSS+JS轮播图：手动轮播，自动轮播

演示效果

轮播图代码：

Html+CSS+JS轮播图：手动轮播，自动轮播相关推荐

最新文章

热门文章