详解JavaScript轮播图一
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解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()
// 获取ul
ul=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>
以上是关于详解JavaScript轮播图一的主要内容，如果未能解决你的问题，请参考以下文章