这是一个简单的前端轮播图
由html,css,js三部分组成(前端的基础)
一:html部分 导入css,js以及对应的图片,一目了然

<!DOCTYPE html>
<html>
<head>
      <meta  http-equiv="Content-Type" content="text/html; charst=UTF-8" />
      <title>页面</title>
      <link rel="stylesheet" type="text/css" href="1.css">

     </head>
  <body>
<div class="f1">
  <ul style="left:0">
    <li><img src="1.jpg" style="width:500px; height: 400px;"></li>
    <li><img src="2.jpg" style="width:500px; height: 400px;"></li>
    <li><img src="3.jpg" style="width:500px; height: 400px;"></li>
    <li><img src="4.jpg" style="width:500px; height: 400px;"></li>
    <li><img src="5.jpg" style="width:500px; height: 400px;"></li>
    </ul>
  <div class="img">
   <ul>
     <li><img src="le.png" style="width:50px; height: 50px;" onclick=""></li>
     <li><img src="ri.png" style="width:50px; height: 50px;" onclick=""></li> 
   </ul>
  </div>
  <div class="button">
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
  </div>
</div> 
  <script src="1.js"></script>
  </body>
  </html>

二:css部分 也都是基础知识 个人觉得opacity调节透明度很实用 背景图片用opacity来调节效果就很好

   *{
      margin:0px;
      padding:0px;
   }
   .f1{     
      width: 500px;
      height: 400px;
      margin: 150px 700px;
      position: relative;  
      overflow: hidden; 
   }
   .f1>ul{  
       position: relative; 
       display: flex;
       transition:left 2s ease;
   }
    .f1 li
   {   
       list-style-type: none;
   }
   .img{
      display: flex;
      opacity: 0;
   }
   .img>ul :nth-child(1)
   {
      position: absolute;     
      top: 80px;
      display: inline-block;
   }
   .img>ul :nth-child(2)
   {
      position: absolute;
      top: 80px;
      left: 90%;
      display: inline-block;
   }
   .button>span{
       border-radius: 32px;
       width: 27px;
       height:27px;
       background-color: gray;
       display: inline-block;
       cursor:pointer;
       text-align: center;
       opacity: 0;
   }
   .button :nth-child(1){
       position: absolute;
       top: 370px;
       left: 78px;
   }
    .button :nth-child(2){
       position: absolute;
       top: 370px;
       left: 148px;
   }
    .button :nth-child(3){
       position: absolute;
       top: 370px;
       left: 218px;
   }
    .button :nth-child(4){
       position: absolute;
       top: 370px;
       left: 288px;
   }
    .button :nth-child(5){
       position: absolute;
       top: 370px;
       left: 358px;
   }
   .f1:hover .img{
        opacity: 0.5;
   }
    .f1:hover .button>span{
        opacity: 0.5;
   }

三:js部分 就我而言,js是前端的灵魂,也是最难掌握的地方
下面代码中的500,2000,3000 是根据图片的大小而定的,我的图片大小是500px
整体流程: 不点击的时候一次500px的移动(刚好一张图片的大小),点击左右箭头就对应的变化500px,点击1,2,3,4,5按钮就跳转到对应图片 注意图片得是jpg格式的

//顺序播放
var all=document.querySelector(".f1");
var list=document.querySelector(".f1>ul");
//参数传进来
function change(offset)
  { 
    //得到当前值
      var newoffset=parseInt(list.style.left)+offset;
      if(newoffset>0){
        //可解析字符串，并返回一个整数
        list.style.left="-2000px";
    }
    else if(newoffset<-2000){
        list.style.left="0px";
    }
    else{
         list.style.left=newoffset+"px";
    }
  }
  var timer=setInterval("img[0].onclick()",3000);
// 给ul加一个选择器
   all.onmouseover=function(){
        clearInterval(timer);
   }
    all.onmouseout=function(){
        timer=setInterval("img[0].onclick()",3000);
   }
//箭头
  var img=document.querySelectorAll(".f1>.img>ul>li");
  //左箭头
  img[0].onclick=function(){
     change(500);
    }
  //右箭头
  img[1].onclick=function(){
        change(-500);
  }
//点击按钮
  var button=document.querySelectorAll(".f1>.button>span");
  for(i=0;i<button.length;i++)
  { 
  button[i].onclick=function()
  {    
      list.style.left=(this.innerHTML-1)*(-500)+"px";
  }
}

样式图片

图片说明




菜鸡一枚,没有干货请见谅
图片说明