适合新手最简单的原生js轮播图实现讲解
程序员文章站
2023-02-21 11:44:08
经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，...
经过几天的努力，终于攻克了这一难题，于是迫不及待的想要分享给大家，编写之前，我也看了不少其他博主的博客，大多是用偏移量写的，对新手来说，还是有些难以理解，虽然可能实现的需求不一样，但我想先从简入手，所以自己查阅资料，修改bug，终于完成。话不多说，上代码：如果可以的话，顺手给个赞，给新手点鼓励呗~~~
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>document</title>
<script src="jquery.js"></script>
<style>
*{
margin: 0px;
padding:0px;
list-style: none;
text-decoration: none;
}
#flash{ /*根据图片的大小来设置外层p的大小*/
width: 520px;
height: 280px;
margin: 0 auto;
position: relative; /*设置p定位，方便之后图片及圆点位置的设定*/
border:1px solid black;
}
#flash img{
width: 100%;
height: 100%;
position: absolute; /*设置所有图片重叠*/
left: 0px;
top: 0px;
display: none; /*设置所有图片隐藏，通过改变第一个图片的行间样式来使第一个图片显示*/
}
#flash ul{
width: 150px;
height: 25px;
border-radius: 20px;
background-color:rgba(255,255,255,0.5);
position: absolute;
left: 35%;
bottom: 10%;
}
#flash ul li{
width: 12px;
height: 12px;
margin-top:5px;
background-color: #fff;
border-radius: 50%;
margin-left: 15px;
float: left;
}
#flash ul .li_1{
background-color: #f40; /*设置第一个圆点背景色为红色*/
}
#flash .span-r{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
right: 2%;
top: 45%;
background-color: rgba(255,255,255,0.5);
}
#flash .span-r span{
width: 100%;
height:100%;
color:rgba(0,0,0,0.5);
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
cursor: pointer;
}
#flash .span-l{
width: 50px;
height: 50px;
border-radius: 50%;
position: absolute;
left: 2%;
top: 45%;
background-color: rgba(255,255,255,0.5);
}
#flash .span-l span{
width: 100%;
height:100%;
color:rgba(0,0,0,0.5);
font-size: xx-large;
font-weight: 700;
line-height: 50px;
margin-left: 15px;
cursor: pointer;
}
</style>
</head>
<p id="flash">
<img src="img1.jpg" alt="" style="display: block">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<img src="img4.jpg" alt="">
<img src="img5.jpg" alt="">
<ul>
<li class="li_1"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<p class="span-r">
<span>></span>
</p>
<p class="span-l">
<span><</span>
</p>
</p>
<body>
<script>
var p = document.getelementbyid('flash');
var img = p.getelementsbytagname('img'); /*选中p下所有的图片*/
var ul = document.getelementsbytagname('ul')[0];
var li = ul.getelementsbytagname('li');
var p_r = document.getelementsbytagname('p')[1];
// var span_r = p_r.getelementsbytagname('span');
var p_l = document.getelementsbytagname('p')[2];
// var sapn_l = p_l.getelementsbytagname('span');
var len = img.length;
var count = 0; /*设置count来显示当前图片的序号*/
function run(){ /*将定时器里的函数提取到外部*/
count++;
count = count==5?0:count; /*当图片加载到最后一张时，使其归零*/
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/
}
img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundcolor = "#fff"; /*原理同上*/
}
li[count].style.backgroundcolor = "#f40";
}
var timer = setinterval(run,1000); /*定义定时器，使图片每隔1s更换一次*/
p.onmouseover = function(){
clearinterval(timer);
}
p.onmouseleave = function(){ /*定义鼠标移出事件，当鼠标移出p区域，轮播继续*/
timer = setinterval(run,1000);
}
for(var i=0;i<len;i++){
li[i].index = i; /*定义index记录当前鼠标在li的位置*/
li[i].onmouseenter = function(){ /*定义鼠标经过事件*/
for(var i=0;i<len;i++){ /*通过for循环将所有图片隐藏，圆点背景设为白色*/
li[i].style.background = '#fff';
img[i].style.display = 'none';
}
this.style.background = '#f40'; /*设置当前所指圆点的背景色*/
img[this.index].style.display = 'block'; /*使圆点对应的图片显示*/
}
}
p_r.onclick = function(){ /*因为span没有设置宽高，直接把事件添加到他的父级*/
run(); /*直接调用现成的run函数*/
}
function reverse(){
count--;
count = count==-1?4:count;
for(var i=0;i<len;i++){
img[i].style.display = 'none'; /*利用for循环使除当前count位其他图片隐藏*/
}
img[count].style.display = 'block'; /*显示当前count的值所代表的图片*/
for(var i=0;i<li.length;i++){
li[i].style.backgroundcolor = "#fff"; /*原理同上*/
}
li[count].style.backgroundcolor = "#f40";
}
p_l.onclick = function(){
reverse(); /*重新设置函数*/
}
</script>
</body>
</html>
运行效果如下：