简单实现jQuery轮播效果

本文实例为大家分享了jQuery轮播效果展示的具体代码，供大家参考，具体内容如下

jQ代码：

在写jQuery代码之前一定要先导库，此处我用的是3.0的库

 css样式：

* {
 margin: 0;
 padding: 0;
      }

      .divbg {
 width: 100%;
 height: 350px;
 
 position: relative;
      }

      .mb {
 width: 30%;
 height: 350px;
 background: rgba(0, 0, 0, 0.3);
 position: absolute;
      }

      .mb:first-child {
 left: 0px;
      }

      .mb:nth-child(2) {
 right: 0px;
      }

      .ullist {
 width: 200%;
 height: 350px;
 margin-left: -50%;
      }

      .lilist {
 width: 20%;
 height: 350px;
 list-style: none;
 float: left;
      }

      .imglist {
 width: 100%;
 height: 100%;
      }
      .divblock{
 width: 20%;
 height: 70%;
 border: 4px solid rgba(255, 255, 255, 0.32);
 position: absolute;
 z-index: 5;
 left: 46%;
 top: 15%;
 overflow: hidden;
      }
      .s_mb{
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0.5);
 position: absolute;
 z-index: 10;
      }
      .s_ullist{
 width: 500%;
 height: 100%;
 margin-left: -200%;
      }
      .s_lilist{
 width: 20%;
 height: 100%;
 list-style: none;
 float: left;
      }
      .s_imglist{
 height: 100%;
 width: 100%;
      }
      .s_mb img{
 margin-left: 16%;
 margin-top: 65%;
 cursor: pointer;
      }

html样式：

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