【面试集锦】好未来前端面试题---JS实现轮播图

思路:
1、首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片
2、container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化。
3、图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示
4、当鼠标滑动到图片上时,清除定时器,图片停止轮播,当鼠标移出时继续进行轮播
5、图片上有一组小圆点用于与当前显示的图片相对应,同时可以通过点击的方式查看对应的图片
6、图片可以通过点击pre,next进行左右滑动显示
代码:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图title>
    <style type="text/css">
        .container{
            margin:0 auto;
            width:600px;
            height:400px;
            position: relative;
            overflow: hidden;
            border:4px solid gray;
            box-shadow: 3px 3px 5px gray;
            border-radius:10px;
        }
        .list{
            width:4200px;
            height:400px;
            position: absolute;
            top:0px;
        }
        img{
            float:left;
            width:600px;
            height:400px;
        }
      .dots{
          position: absolute;
          left:40%;
          bottom:30px;
          list-style: none;
       }
        .dots li{
            float:left;
            width:8px;
            height:8px;
            border-radius: 50%;
            background: gray;
            margin-left:5px }
        .dots .active{
            background: white;
        }
        .pre,.next{
            position: absolute;
            top:40%;
            font-size:40px;
            color:white;
            text-align:center;
            background: rgba(128,128,128,0.5);
            display:none;
        }
        .pre{
            left:30px;
        }
        .next{
            right:30px;
        }
    style>
head>
<body>
   <div class="container">
       <div class="list" style=" left:-600px;">
           <img src="img/5.jpg">
           <img src="img/1.jpg">
           <img src="img/2.jpg">
           <img src="img/3.jpg">
           <img src="img/4.jpg">
           <img src="img/5.jpg">
           <img src="img/1.jpg">
       div>
       <ul class="dots">
           <li index=1 class="active dot">li>
           <li index=2 class="dot">li>
           <li index=3 class="dot">li>
           <li index=4 class="dot">li>
           <li index=5 class="dot">li>
       ul>
       <div class="pre"><div>
       <div class="next">>div>
   div>
<script type="text/javascript">
    var index=1,timer;

    window.onload = init;
  /*初始化函数*/
    function init(){
        eventBind();
        autoPlay();
    }
    /*自动轮播*/
    function autoPlay(){
         timer =setInterval(function () {
            animation(-600);
            dotIndex(true);
        },1000)
    }
    /*停止轮播*/
    function stopAutoPlay() {
        clearInterval(timer);
    }
    /*改变dot的显示*/
    function dotIndex(add){
        if(add){
            index++;
        }
       else{
            index--;
        }
        if(index>5){
            index = 1;
        }
        if(index<1){
           index = 5;
        }
        dotActive();
    }
   function dotActive() {
       var dots = document.getElementsByClassName("dot");
       var len = dots.length;
       for(var i=0 ;i"dot";
       }

       for(var i=0;i/*此处可以不用parseInt,当不用全等时*/
           if(index === parseInt(dots[i].getAttribute("index"))){
               dots[i].className = "dot active";
           }
       }
   }

   /*初始化事件绑定*/
    function eventBind(){
        /*点的点击事件*/
        var dots = document.getElementsByClassName("dot");
        var len = dots.length;
        for(var i=0;ifunction(j){
                dots[j].onclick = function(e){
                    var ind = parseInt(dots[j].getAttribute("index"));
                    animation((index - ind)*(-600));/*显示点击的图片*/
                    index = ind;
                    dotActive();
                }
            })(i)
        }
        /*容器的hover事件*/
        var con = document.getElementsByClassName("container")[0];
        /*鼠标移动到容器上时,停止制动滑动,离开时继续滚动*/
        con.onmouseover = function (e) {
            stopAutoPlay();
            document.getElementsByClassName("pre")[0].style.display = "block";
            document.getElementsByClassName("next")[0].style.display = "block";
        }
        con.onmouseout =function(e){
            autoPlay();
            document.getElementsByClassName("pre")[0].style.display = "none";
            document.getElementsByClassName("next")[0].style.display = "none";
        }
        /*箭头事件的绑定*/
         var pre = document.getElementsByClassName("pre")[0];
         var next = document.getElementsByClassName("next")[0];
         pre.onclick = function (e) {
             dotIndex(false);
             animation(600);
         }
        next.onclick = function (e) {
            dotIndex(true);
            animation(-600);
        }
    }
    /*list容器的偏移量是图片轮播*/
    function animation(offset){
        var lists = document.getElementsByClassName("list")[0];
        var left =   parseInt(lists.style.left.slice(0,lists.style.left.indexOf("p"))) + offset;
        if(left<-3000){
            lists.style.left = "-600px";
        }
       else if(left>-600){
            lists.style.left = "-3000px";
        }
      else{
            lists.style.left = left+"px";
        }
    }

script>
body>
html>

你可能感兴趣的:(前端面试集锦,轮播图,原生JS)