幻灯片轮播图（含自动播放和手动点击播放，代码易懂）

HTML代码：

<!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>幻灯片轮播图</title><!-- 引入当前页面的样式表 --><link rel="stylesheet" href="./Micss/Lunbo.css"><!-- 引入重置样式表 --><link rel="stylesheet" href="./Micss/reset.css"><!-- 引入js文件 --><script src="./js/Lu.js"></script>
</head><body><!-- 轮播图容器 --><div class="slideshow"><ul class="mySlides clearfix"><li class="sideItem slideActive fade"><a href="javascript:;"><img src="./img/img.jpg"></a></li><li class="sideItem fade"><a href="javascript:;"><img src="./img/img2.jpg"></a></li><li class="sideItem fade"><a href="javascript:;"><img src="./img/img3.jpg"></a></li></ul><div class="prev">❮</div><div class="next">❯</div><nav class="navHover"><ul><li class="dot dotActive"></li><li class="dot"></li><li class="dot"></li></ul></nav></div>
</body></html>

CSS代码（Lunbo.css):

* {box-sizing: border-box
}body {font-family: Verdana, sans-serif;
}.sideItem {position: absolute;
}.slideActive {z-index: 99;display: block;
}/* 幻灯片容器 */
.slideshow {max-width: 1000px;position: relative;margin: 100px auto;
}/* 下一张 & 上一张 按钮 */
.prev,
.next {z-index: 100;cursor: pointer;position: absolute;margin-top: 138px;width: auto;padding: 16px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;
}/* 定位 "下一张" 按钮靠右 */
.next {right: 0;border-radius: 3px 0 0 3px;
}/* 上一张和下一张的鼠标移上效果 */
.prev:hover,
.next:hover {background-color: rgba(0, 0, 0, 0.8);
}/* 导航元素所在的nav设置 */
.navHover {position: absolute;z-index: 100;right: 455px;bottom: -340px;
}/* 导航圆点设置 */
.dot {width: 13px;height: 13px;border: 2px solid rgb(187, 187, 187);border-radius: 50%;background-color: rgba(0, 0, 0, .4);float: left;margin: 0 4px;cursor: pointer;right: 0;
}/* 导航圆点鼠标移上显示设置 */
.dot:hover {border: 2px solid rgba(0, 0, 0, .4);background-color: rgb(187, 187, 187);
}.dotActive {border: 2px solid rgba(0, 0, 0, .4);background-color: rgb(187, 187, 187);
}/* 淡出动画 */
.fade {-webkit-animation-name: fade;-webkit-animation-duration: 1.5s;animation-name: fade;animation-duration: 1.5s;
}@-webkit-keyframes fade {from {opacity: .4}to {opacity: 1}
}@keyframes fade {from {opacity: .4}to {opacity: 1}
}

JavaScript代码（Lu.js）:

window.onload = function () {var slideIndex = 1;showSlides(slideIndex);let prev = document.getElementsByClassName('prev')[0];let next = document.getElementsByClassName('next')[0];let navs = document.getElementsByClassName('dot');// 上一张点击事件prev.addEventListener('click', function () {plusSlides(-1);});// 下一张点击事件next.addEventListener('click', function () {plusSlides(1);});for (let i = 1; i <= navs.length; i++) {navs[i - 1].addEventListener('click', function () {currentSlide(i);});}function currentSlide(n) {clearTimeout(timeout);showSlides(slideIndex = n);}function plusSlides(n) {clearTimeout(timeout);showSlides(slideIndex += n - 1);}function showSlides(n) {var i;let imgs = document.getElementsByClassName('sideItem');let navs = document.getElementsByClassName('dot');if (n > imgs.length) { slideIndex = 1; }if (n < 1) { slideIndex = imgs.length; }for (i = 0; i < imgs.length; i++) {imgs[i].classList.remove("slideActive")//移出slideActive类}for (i = 0; i < navs.length; i++) {navs[i].classList.remove("dotActive");}imgs[slideIndex - 1].classList.add("slideActive");//增加slideActive类navs[slideIndex - 1].classList.add("dotActive");//增加dotActive类timeout = setTimeout(showSlides, 2000); // 切换时间为 2 秒slideIndex++;if (slideIndex > imgs.length) {slideIndex = 1;}return timeout;}
}

幻灯片练习所需图片：

img.jpg

img2.jpg

img3.jpg

幻灯片轮播图（含自动播放和手动点击播放，代码易懂）相关推荐

怎样实现banner自动播放html,纯css实现轮播图banner自动轮换效果
话不多说直接上代码 * { margin: 0; padding: 0; } .container { margin:300px auto; height: 400px; width: 1146px ...
html幻灯片图片轮播w3,支持30+种类型幻灯片|轮播图|旋转木马的强大jQuery插件
jssor slider是一款功能非常强大的可制作超过30种不同类型的幻灯片|轮播图|旋转木马的jQuery插件.jssor具有高性能,轻量级,跨浏览器等特点,它可以支持IE6+的浏览器,并且可以支持 ...
boostrap 鼠标滚轮滑动图片_Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法...
最近ytkah在学习用bootstrap搭建网站,Bootstrap能自适应pc端和手机端,并且移动设备优先,适合现如今移动营销.bootstrap是封装好的框架,需要某些功能只需调用相应的组件就可以 ...
JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
js实现幻灯片轮播图
1.html 选取了五张图片放入div中,然后是左右箭头,以及按钮,代码如下 <!DOCTYPE html> <html lang="en"> <h ...
双向箭头轮播图html,根据轮播图背景色自动填充剩余背景色的走马灯
起因今天产品经理过来说,需要在首页加上一个类似一个天猫的轮播图. 天猫的轮播图是图片定宽定高, 当不同分辨率屏幕时候会根据图片的背景色填充容器左右空隙. 比如 1800px屏: 3000px屏: ...
老徐WEB：JS简单实现图片滚动效果轮播图，自动、手动和自适应(二)
轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯.电商和个人博客等,首页基本都会有轮播图. 老徐在上一篇文章的基础上[最简单详细的轮播图原理和制作过程],又扩展了功能,使之成为 ...
android开发banner框架,Android 轮播图最火的banner框架 (包含demo和代码解释)
在android里,轮播图的实现可以使用viewpage的控件实现,但由于实现有点繁琐,可以使用banner框架,方便快捷的实现轮播图的效果.这里首先贴上github的banner框架地址:https ...
基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图
css部分 <style>#box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hid ...

幻灯片轮播图（含自动播放和手动点击播放，代码易懂）

幻灯片练习所需图片：

幻灯片轮播图（含自动播放和手动点击播放，代码易懂）相关推荐

最新文章

热门文章