上期我们写了一种无缝滚动的轮播图&＃xff0c;今天我们继续学习另一种轮播图&＃xff0c;那就是渐变轮播图。

其实html和css的内容挺简单的 主要就是放上需要轮播的照片&＃xff0c;然后把照片固定在合适的地方即可。渐变轮播图和顺序轮播图不同的地方在于&＃xff0c;渐变轮播图是利用透明度来实现的。

轮播图的主要内容&＃xff0c;也是最难的地方。 我直接把注释的需要理解的地方都写在代码里面了 所以大家直接看代码就好

!DOCTYPE html>html lang&＃61;"en">head>meta charset&＃61;"UTF-8">meta name&＃61;"viewport" content&＃61;"width&＃61;device-width, initial-scale&＃61;1.0">title>Document/title>style>* {padding: 0;margin: 0;}*::selection {background: none;}.box {width: 1200px;height: 700px;margin: 100px auto;position: relative;}.box ul {width: 1200px;height: 700px;}ul li {opacity: 0;position: absolute;top: 0;left: 0;list-style: none;}img {width: 1200px;height: 700px;}.box ul li:first-child {opacity: 1;}.prev {width: 50px;height: 50px;border-radius: 25px;background-color: pink;position: absolute;top: 40%;left: 10px;text-align: center;line-height: 50px;cursor: pointer;display: none;}.next {width: 50px;height: 50px;border-radius: 25px;background-color: pink;position: absolute;top: 40%;text-align: center;line-height: 50px;cursor: pointer;right: 10px;display: none;}.next:hover,.prev:hover {background-color: skyblue;}ol {width: 350px;position: absolute;bottom: 5px;right: 0;}ol li {list-style: none;float: left;width: 45px;height: 45px;border-radius: 50%;margin-left: 10px;background-color: deepskyblue;line-height: 45px;text-align: center;cursor: pointer;}.bg {background-color: #fff;}/style>/head>body>div id&＃61;"box" class&＃61;"box">ul id&＃61;"boxul">li>img src&＃61;"./img/1.jpg" alt&＃61;"">/li>li>img src&＃61;"./img/2.jpg" alt&＃61;"">/li>li>img src&＃61;"./img/3.jpg" alt&＃61;"">/li>li>img src&＃61;"./img/4.jpg" alt&＃61;"">/li>li>img src&＃61;"./img/5.jpg" alt&＃61;"">/li>/ul>ol id&＃61;"boxol">/ol>div id&＃61;"prev" class&＃61;"prev">prev/div>div id&＃61;"next" class&＃61;"next">next/div>/div>/body>script>//封装一个简单的函数 少打一点代码function zhd(id) {return document.getElementById(id)}var box &＃61; zhd(&＃39;box&＃39;)var boxul &＃61; zhd(&＃39;boxul&＃39;)var boxol &＃61; zhd(&＃39;boxol&＃39;)var ulis &＃61; boxul.getElementsByTagName(&＃39;li&＃39;)//获取元素和 ul下面的每一个lifor (var i &＃61; 0; i ulis.length; i&＃43;&＃43;) {var oli &＃61; document.createElement(&＃39;li&＃39;)oli.innerText &＃61; i &＃43; 1boxol.appendChild(oli)oli.setAttribute(&＃39;num&＃39;, i)//循环创建和ul下面数量相同的li 然后将其放入ol下面 给每个li添加一个下标 以便于后面跟着图片动}var olis &＃61; boxol.getElementsByTagName(&＃39;li&＃39;)//上面只是动态创建了ol下面的li 这里才是获取了这个liolis[0].className &＃61; &＃39;bg&＃39;//默认第一个选中for (var i &＃61; 0; i olis.length; i&＃43;&＃43;) {olis[i].onclick &＃61; function() {index &＃61; this.getAttribute(&＃39;num&＃39;)//给下标注册事件 让其和图片的下标对应for (var j &＃61; 0; j ulis.length; j&＃43;&＃43;) {ulis[j].style.opacity &＃61; 0olis[j].className &＃61; &＃39;&＃39;//排他思想 先让所有的都不高亮}ulis[index].style.opacity &＃61; 1this.className &＃61; &＃39;bg&＃39;//然后让选中的高亮}}var a &＃61; 0next.onclick &＃61; function() {a &＃61;&＃61; ulis.length - 1 ? a &＃61; 0 : a&＃43;&＃43;//当到最后一张图的时候 让其显示第一张图for (var i &＃61; 0; i ulis.length; i&＃43;&＃43;) {ulis[i].style.opacity &＃61; 0olis[i].className &＃61; &＃39;&＃39;//排他思想 先让所有的都不高亮}ulis[a].style.opacity &＃61; 1olis[a].className &＃61; &＃39;bg&＃39;//然后让选中的高亮}prev.onclick &＃61; function() {a &＃61;&＃61; 0 ? a &＃61; ulis.length - 1 : a--//当到第一张图的时候 让其显示最后一张图for (var i &＃61; 0; i ulis.length; i&＃43;&＃43;) {ulis[i].style.opacity &＃61; 0olis[i].className &＃61; &＃39;&＃39;//排他思想 先让所有的都不高亮}ulis[a].style.opacity &＃61; 1olis[a].className &＃61; &＃39;bg&＃39;//然后让选中的高亮}box.onmouseenter &＃61; function() {next.style.display &＃61; &＃39;block&＃39;prev.style.display &＃61; &＃39;block&＃39;clearTimeout(timeId)//鼠标移入的时候 让两个图标显示 停止计时器}box.onmouseleave &＃61; function() {next.style.display &＃61; &＃39;none&＃39;prev.style.display &＃61; &＃39;none&＃39;timeId &＃61; setInterval(function() {next.click()}, 1000)//鼠标移出的时候 让两个图标隐藏 开启计时器}var timeId &＃61; setInterval(function() {next.click()}, 1000)/script>/html>

今天的分享就到这啦&＃xff0c;咋们下期见。