直播APP源代码，水平轮播图

原创

yunbaokeji柯基

修改于 2020-12-28 18:07:41

5640

修改于 2020-12-28 18:07:41

文章被收录于专栏：直播知识直播知识

直播APP源代码，实现水平轮播图相关的代码

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <style>
  *{
   margin: 0;
   padding: 0;
  }
  div.content{
   position: relative;   
   overflow: hidden; 
   width: 700px;
   height: 400px;
   border:1px solid beige;
   background-color: aqua;
  }
  ul{
   position: absolute;
   list-style: none;
  }
  ul.top>li{
   float: left;
   width: 700px;
   height: 400px;
  }
  img{
   width: 100%;
   height: 100%;
  }
  button.perv{
   position: absolute;
   top: 191px;
   left:0;
  }
     button.next{
   position: absolute;
   top: 191px;
   right:0;
  }
  ul.bottom{
   position: absolute;
   top: 336px;
   left: 20px;
  }
  ul.bottom>li{
   float: left;
   width: 25px;
   height: 25px;
   margin-left:15px;
   border: 1px solid #00FFFF;
   text-align: center;
   line-height: 25px;
   cursor: pointer;
  }
  .red{
   background-color: red;
  }
 </style>
 <script>
  function $(n){
   return document.querySelector(n);
  }
  window.onload=function(){
   var liIndex=1;
   var liWidth,liLenth,lilen,timer,timer2;
   go();
   function go(){
    //复制前后li
    var copy_li1=$(".top>li:first-of-type").cloneNode(true);
    $(".top").appendChild(copy_li1);
    var copy_lilast=$(".top>li:nth-of-type(5)").cloneNode(true);
    $(".top").insertBefore(copy_lilast,$(".top>li:first-of-type"));
    //给ul宽度
     liWidth=$(".top>li").clientWidth;
        lilen=document.querySelectorAll(".top>li").length;
     $(".top").style.width=lilen*liWidth+"px";
                 $(".top").style.left=-liWidth+"px";
     //左右点击
    $(".perv").onclick=function(){
     prev(liIndex);
    }
    $(".next").onclick=function(){
     next(liIndex);
    }
    //点击子弹
    var bullets=document.querySelectorAll(".bottom>li");
    for(var i=0;i<bullets.length;i++){
     bullets[i].index=i;
     bullets[i].onclick=function(){
      liIndex=this.index+1;
      into(liIndex);
     }
    }
    $(".content").onmouseenter=function(){
       stop();
    }
    $(".content").onmouseleave=function(){
      auto();
    }
    auto();
   }
   function prev(){
    liIndex--;
    into(liIndex);
   }
   function next(){
    liIndex++;
    into(liIndex);
   }
   function auto(){
    clearInterval(timer2);
    timer2=setInterval(function(){
     next();
    },2000);
   }
   function stop(){  
    clearInterval(timer2);
   }
   function into(index){
    if(index==lilen){
     liIndex=index=2;
     $(".top").style.left=-liWidth+"px";
    }
    if(index==-1){
     liIndex=index=lilen-3;
     $(".top").style.left=-liWidth*(lilen-2)+"px";
    }
    //
    // 焦点映射
    var foucindex;
    var buttle=document.querySelectorAll(".bottom>li");
    if(index==0){
     foucindex=lilen-3;
    }else if(index==lilen-1){
     foucindex=0;
    }else{
     foucindex=index-1;
    }
    $(".red").className="";
    buttle[foucindex].className="red";
    //作动画
    var left=-index*liWidth;
    clearInterval(timer);
    timer=setInterval(function(){
     var new_left=parseInt(getComputedStyle($(".top")).left);
     var speed=(left-new_left)/30;
     speed=speed>0?Math.ceil(speed):Math.floor(speed);
     $(".top").style.left=new_left+speed+"px";    
    },10);
    console.log(liIndex);
   }
  }
 </script>
 <body>
  <div class="content">
   <ul class="top">
    <li><img src="img/1.jpg" alt=""></li>
    <li><img src="img/2.jpg" alt=""></li>
    <li><img src="img/3.jpg" alt=""></li>
    <li><img src="img/4.jpg" alt=""></li>
    <li><img src="img/5.jpg" alt=""></li>
   </ul>
   <button class="perv" type="button">perv</button>
   <button class="next" type="button">next</button>
   <ul class="bottom">
    <li class="red">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
   </ul>
  </div>
 </body>
</html>

以上就是直播APP源代码，实现水平轮播图相关的代码，更多内容欢迎关注之后的文章

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

移动直播