当前位置:编程学习 > > 正文

原生js实现轮播图代码(js实现轮播图制作方法)

时间:2021-10-23 10:23:36类别:编程学习

原生js实现轮播图代码

js实现轮播图制作方法

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

效果如图所示

原生js实现轮播图代码(js实现轮播图制作方法)

代码如下:

  • <!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <title></title>
      
      <style type="text/css">
       
       * {
        padding: 0;
        margin: 0;
       }
       .container {
        position: relative;
        width: 600px;
        height: 300px;
        margin:  30px auto;
        overflow: hidden;
       }
           .left {
         display: none;
         position: absolute;
         top: 50%;
         left: -20px;
         transform: translateY(-50%);
         width:50px;
         height: 50px;
         border-top-right-radius: 50%;
         border-bottom-right-radius: 50%;
         background-color: rgba(0,0,0,0.5);
         z-index: 999;
        }
        .left i {
        display: block;
           margin-top: 10px;
        margin-left: 20px;
        width: 30px;
        height: 30px;
        background: url(img/left.jpg" alt="原生js实现轮播图代码(js实现轮播图制作方法)" border="0" />
    
  • 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐