您的位置：首页 > 编程学习 > > 正文

原生js实现轮播图代码（js实现轮播图制作方法）

更多时间：2021-10-23 10:23:36 类别：编程学习浏览量：2953

原生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" />

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

标签：js 轮播图

上一篇：sql数据库有几种数据类型（SQL的常用数据类型列表详解）

下一篇：用html5的canvas绘制剪裁图像（Html5 canvas画图白板踩坑）

您可能感兴趣

原生js实现轮播图代码（js实现轮播图制作方法）

原生js实现轮播图代码

热门推荐

排行榜