网站建设资讯

NEWS

网站建设资讯

简单实现jQuery轮播效果

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

站在用户的角度思考问题,与客户深入沟通,找到东营区网站设计与东营区网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、网络空间、企业邮箱。业务覆盖东营区地区。

jQ代码:

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


   

 css样式:

       * {
        margin: 0;
        padding: 0;
      }

      .divbg {
        width: 100%;
        height: 350px;
        /*overflow: hidden;*/
        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样式:

  

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


新闻名称:简单实现jQuery轮播效果
文章源于:http://cdweb.net/article/jiiosh.html