原生JS实现轮播效果--新手专属

效果图:

css代码:

<style>
    *{
    
    
        margin:0;
        padding:0;
    }
    #box{
    
    
        width: 1200px;
        height: 460px;
        background: url("./img/bg2.jpg");
        margin: 0 auto;
        position: relative;
    }
    .img{
    
    
        width: 1200px;
        height: 460px;
        position: absolute;
        top:0;
        left:0;
    }
    .img:nth-of-type(1){
    
    
        background: url("./img/bg1.jpg");
    }
    .img:nth-of-type(2){
    
    
        background: url("./img/bg2.jpg");
        display: none;
    }
    .img:nth-of-type(3){
    
    
        background: url("./img/bg3.jpg");
        display: none;
    }
    .jiantou1{
    
    
        left: 20px;
    }
    .jiantou2{
    
    
      right: 20px;
    }
    #box .cc{
    
    
        width: 50px;
        height: 200px;
        line-height: 200px;
        position: absolute;
        top:130px;
        background: rgba(0,0,0,0.3);
        font-size: 50px;
        text-align: center;
        font-weight: bold;
        color:#fff;
    }
    .div-dian{
    
    
        width: 156px;
        height: 32px;
        position: absolute;
        right:10px;
        bottom: 10px;
    }
    .div-dian span{
    
    
        display: inline-block;
        width: 12px;
        height: 12px;
        border: 1px solid #000000;
        border-radius: 50%;
        background: #fff;/*默认颜色*/
    }
    .div-dian .span-first{
    
    
        background: springgreen;
    }
</style>

html代码:

<div id="box">
    <div class="img"></div>
    <div class="img"></div>
    <div class="img"></div>
    <div class="jiantou jiantou1 cc">&lt;</div>
    <div class="jiantou jiantou2 cc">&gt;</div>
    <div class="div-dian">
        <span class="span-first"></span>
        <span></span>
        <span></span>
    </div>
</div>

JavaScript

<script>
    //1.点击箭头切换下一张图片
    var jiantou=document.getElementsByClassName("jiantou");
    var imgs=document.getElementsByClassName("img");//图片
    var box=document.getElementById("box");//大盒子
    var spa=document.getElementsByTagName("span");//点
    var index =0;//默认第一张
    //单击事件-->箭头轮播
    jiantou[1].onclick=function() {
    
    
        lb(true)
    };
    //单击事件<--箭头轮播
   jiantou[0].onclick=function() {
    
    
       lb(false)
   };
   //鼠标移入大盒子 停止轮播
     box.onmouseover=function() {
    
    
         clearInterval(timer)
     };
     //鼠标移出大盒子 继续轮播
    box.onmouseout=function() {
    
    
        timer=setInterval(function() {
    
    lb(true)},1000);
    };

   //间歇调用  (用匿名函数--传参)
  var timer=setInterval(function() {
    
    lb(true)},1000);
  //函数封装
    function lb(n) {
    
    //n为开关进行判断真true或假false
        if(n){
    
    //++
            index++;//递增(往前)
            if(index>2){
    
    //当下标大于2时
                index=0;//默认图片
            }
        }else{
    
    //--
            index--;//递减(倒退)
            if(index<0){
    
    //当下标小于0时,执行index=2
                index=2;//默认最后图片
                //console.log(index=2)
            }
        }
        //循环遍历   （以下公共部分--jiantou）
        for(var i=0;i<imgs.length;i++){
    
    
            imgs[i].style.display="none";//全部隐藏
            spa[i].className="";//空
        }
        imgs[index].style.display="block";//默认当前第一张显示
        spa[index].className="span-first";//默认选中
    }
    //点击某一种项进行跳转某图片
    for(var i=0;i<spa.length;i++){
    
    //点
      spa[i].index=i;//获取所有的下标
      spa[i].onclick=function() {
    
    //单击点
          //循环遍历
          for(var i=0;i<imgs.length;i++){
    
    
              imgs[i].style.display="none";//全部隐藏
              spa[i].className="";//空
          }//this.index:代表点击的某一项下标
          imgs[this.index].style.display="block";//默认当前第一张显示
          spa[this.index].className="span-first";//默认选中
          index=this.index;//下标改成当前的下标 //随机选中的一项
      }
    }
</script>