【详解JavaScript轮播图一】

本文主要是介绍【详解JavaScript轮播图一】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript轮播图一源码分析

<!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>body{margin: 0;padding: 0;}.carousel{width: 100%;height: 33.3vw;position: relative;left: 0;top: 0;font-size: 0;min-width: 1000px;}.carousel>.img-con{width: 100%;height: 100%;position: absolute;left: 0;top: 0;opacity: 0;transition:  all 0.5s;}.carousel>.img-con>img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}.carousel>.img-con>div{position: absolute;left:10vw;top: 2vw;font-size: 20px;color: white;}.carousel>.img-con>div>span>i{font-style:normal;font-size: 28px;}.carousel>.img-con>div>h1{font-size: 20px;}ul{position: absolute;right: 50px;top:50%;transform: translate(0,-50%);list-style: none;margin: 0;padding: 0;}ul>li{margin-top: 1vw; }ul>li img{border:2px solid transparent;}ul>li:first-child{margin-top: 0;}</style>
</head>
<body><div class="carousel"><div class="img-con" id="a"><img src="./img/a.jpg"><div><span><i>28</i>/Jul.2022</span><h1>与父母的47天自驾游｜向疆而行2万里，我们依旧是过客</h1></div></div><div class="img-con" id="b"><img src="./img/b.jpg"><div><span><i>27</i>/Jul.2022</span><h1>自驾川西小环线，在千碉之国遇见梨花如雪的季节</h1></div></div><div class="img-con" id="c"><img src="./img/c.jpg"><div><span><i>26</i>/Jul.2022</span><h1>被误解的沙县，原来有这么多美食只有在当地才能吃到！</h1></div></div><div class="img-con" id="d"><img src="./img/d.jpg"><div><span><i>25</i>/Jul.2022</span><h1>周末出逃计划 | 打卡美丽中国</h1></div></div><div class="img-con" id="e"><img src="./img/e.jpg"><div><span><i>24</i>/Jul.2022</span><h1>寻迹山川湖海，邂逅云南的冬与夏</h1></div></div><ul><li><a href="#a"><img src="./img/a_icon.png"></a></li><li><a href="#b"><img src="./img/b_icon.png"></a></li><li><a href="#c"><img src="./img/c_icon.png"></a></li><li><a href="#d"><img src="./img/d_icon.png"></a></li><li><a href="#e"><img src="./img/e_icon.png"></a></li></ul></div><script>var imgPrev,ul,iconPrev;init();function init(){// 获取ulul=document.querySelector("ul");// 侦听hashchange事件window.addEventListener("hashchange",hashChangeHandler);// 判断当前页面的地址栏中是否有hash值var index=["#a","#b","#c","#d","#e"].indexOf(location.hash);// 如果没有就给当前页面增加hash值是#a，这样就会触发hashchange事件if(index===-1) location.href+="#a"; else hashChangeHandler();// 如果已经有hash，证明当前刷新了页面，但是hash发生改变，手动调用切换动画}// 当hashchange变化时，执行这个方法function hashChangeHandler(e){// 获取当前页面中的hash值去除#var id=location.hash.slice(1);// 根据当前hash值查找到对应id的img-con的元素，并且切换这个元素的opacity属性imgPrev=changePrev(imgPrev,document.getElementById(id),"opacity",0,1);// 获取当前hash值对应的下标var index=["#a","#b","#c","#d","#e"].indexOf(location.hash);// 切换对应下标所指的小图标的边框线颜色iconPrev=changePrev(iconPrev,ul.children[index].firstElementChild.firstElementChild,"borderColor","transparent","#ff9d00")}/* 切换函数prev 上一次切换的元素elem 本次要切换的元素prop 要切换的样式属性value1 原始样式值value2 要切换的样式值*/function changePrev(prev,elem,prop,value1,value2){// 如果上次切换的元素存在时if(prev){// 设置上次的切换元素样式为原始样式prev.style[prop]=value1;}// 修改本次要切换元素的样式值elem.style[prop]=value2;// 返回本次被切换的元素，这个元素返回到外面时将会赋值给对应的prev元素return elem;}</script>
</body>
</html>