• 分类

  • 重置

js实现幻灯片轮播图

    本文实例为大家分享了js实现幻灯片轮播图的具体代码,供大家参考,具体内容如下

    1.html

    选取了五张图片 放入div中,然后是左右箭头,以及按钮,代码如下

    
    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title>轮播图</title>
     <link href="../css/轮播图.css" rel="stylesheet">
    </head>
    <body>
    <div id="box">
     <img src="../image/car-1.jpg">
     <img src="../image/car-2.jpg">
     <img src="../image/car-3.jpg">
     <img src="../image/car-4.jpg">
     <img src="../image/car-5.jpg">
     <div class="arrow">
     <a class="left" href="javacript:void(0);" ><</a>
     <a class="right" href="javacript:void(0);" >></a>
     </div>
     <ul class="btn">
     <li class="on" slideIndex="1">1</li>
     <li slideIndex="2">2</li>
     <li slideIndex="3">3</li>
     <li slideIndex="4">4</li>
     <li slideIndex="5">5</li>
     </ul>
    </div>
    <script src="../js/轮播图.js">
     </script>
    </body>
    </html>

    2.css给div设置居中

    将所有图片隐藏,设置箭头和小圆点的样式
    代码如下

    
    *{
     margin:0;
     padding:0;
     text-decoration: none;
     list-style: none;
    }
    #box{
     width:800px;
     height: 500px;
     margin:50px auto 0px;
     position: relative;
    }
    #box img{
     width:800px;
     height: 500px;
     display: none;
     animation:fade 3s;
    }
    #box .arrow{
     width:800px;
     height: 80px;
     position: absolute;
     top:50%;
     margin-top: -40px;
    }
    #box .arrow .left,.right{
     display: inline-block;
     line-height: 80px;
     width: 50px;
     height:80px;
    
    }
    #box .arrow .left:hover{
     background:rgba(0,0,0,0.8);
    }
    #box .arrow .right:hover{
     background:rgba(0,0,0,0.8);
    }
    #box .arrow .right{
     text-align: right;
     position: absolute;
     right:0;
    }
    #box .arrow a{
     font-size: 50px;
     color: #ffffff;
    }
    #box .btn{
     position: absolute;
     bottom: 10px;
     left:50%;
     margin-left: -98.47px;
     text-align: center;
    }
    #box .btn li{
     text-align: center;
     margin:0 5px;
     padding: 10px;
     float:left;
     background:white;
     border-radius:20%;
     cursor: pointer;
    
     transition: background 2s ease;
    }
    #box .btn .on{
     background: #000;
     color:white;
    }
    @keyframes fade{
     from{
     opacity:.4;
     }
     to{
     opacity:1;
     }
    }

    3.js部分

    js设定让当前图片显示display:block,其他图片隐藏display:none;

    js代码如下

    
    window.onload=function () {
     var left=document.getElementsByClassName("left")[0];
     var right=document.getElementsByClassName("right")[0];
     var btn=document.getElementsByClassName("btn")[0].getElementsByTagName("li");
     var box=document.getElementById("box");
     var slideIndex=1;
     var index=1;
     var timer;
     //图片切换函数
     showSlides(slideIndex);
     function showSlides(n) {
     var slides=document.getElementById("box").getElementsByTagName("img");
     for(var i=0;i<slides.length;i++){
      slides[i].style.display="none";
      btn[i].className="";
     }
     slides[slideIndex-1].style.display="block";
      btn[slideIndex-1].className="on"
     }
     //箭头切换
     left.onclick=function () {
     if(slideIndex>1) {
      slideIndex--;
      showSlides(slideIndex);
     }else {
      slideIndex=5;
      showSlides(slideIndex);
     }
     }
      right.onclick=function () {
      if(slideIndex<5) {
       slideIndex++;
       showSlides(slideIndex);
      }else {
       slideIndex=1;
       showSlides(slideIndex);
      }
      }
      //btn切换
     for(var i=0;i<btn.length;i++){
     btn[i].onclick=function () {
      var myslideIndex=this.getAttribute('slideIndex');
      // var myindex=parseInt(this.getAttribute("index"));
      slideIndex=myslideIndex;
      showSlides(slideIndex);
     }
     }
     //自动播放
     function play() {
     timer=setInterval(function () {
      right.onclick();
     },4000);
     }
     function stop() {
     clearInterval(timer);
     }
    box.onmouseout=play;
     box.onmouseover=stop;
     play();
    }

    精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持lingkb。